与 CSS/JS 的交互

Thu, 17 Oct 2024 00:00:00 +0800

HTML、CSS 和 JavaScript 是前端开发的三大基础技术，它们通过不同的方式相互作用，创建交互性良好的网页。

HTML 负责定义网页的结构，而 CSS 则负责美化这些结构元素。两者的交互主要通过以下方式：

<style> 标签：直接在 HTML 中嵌入 CSS 样式。这种方式将 CSS 写入到 HTML 文件中，但不推荐用于大型项目，因为这会导致样式与结构混杂在一起。

<style>
 h1 {
 color: red;
 }
</style>

<link rel="stylesheet" href="styles.css">

<h1 style="color: blue;">这是一个标题</h1>

JavaScript 负责操作和控制网页内容，主要与 HTML 进行交互以实现动态效果。以下是交互方式：

<script> 标签：通过 <script> 标签直接在 HTML 中嵌入 JavaScript 代码。此方法会在 HTML 中直接执行 JavaScript，适合小规模的脚本。

<script>
 alert('这是一个弹窗');
</script>

外部 JavaScript 文件：通过 <script> 标签引入外部 JavaScript 文件。这种方式将 JavaScript 逻辑与 HTML 分离，便于维护和重用。

<script src="script.js"></script>

<p id="text">这是原始文本</p>
<script>
 document.getElementById('text').innerText = '这是通过 JS 改变的文本';
</script>

<button id="btn">点击我</button>
<script>
 document.getElementById('btn').addEventListener('click', function() {
 alert('按钮被点击了');
 });
</script>

JavaScript 也可以与 CSS 进行交互，动态地控制页面的样式。常见的方法有：

与 CSS/JS 的交互 on Last Stand