---

第二十六章：CSS与JavaScript交互

在Web开发的广阔天地中，CSS（层叠样式表）与JavaScript的紧密合作构成了动态、交云变幻的用户界面基石。两者虽各司其职——CSS负责页面的布局与样式，而JavaScript则专注于行为控制与用户交互——但它们的结合却能创造出令人惊叹的网页效果。本章将深入探讨CSS与JavaScript之间的交互机制，通过实例展示如何利用这两种技术共同构建更加丰富、响应式的Web应用。

26.1 引言：为何需要CSS与JavaScript交互

在早期的Web开发中，CSS与JavaScript往往被视作两个独立的领域，各自处理页面的外观与行为。然而，随着Web技术的不断发展，用户对于网页的期望不再局限于静态展示，而是希望网页能够根据用户的操作实时变化，提供更为个性化的体验。因此，CSS与JavaScript之间的交互变得尤为重要。

通过JavaScript动态修改CSS属性，可以实现诸如动画效果、响应式设计调整、主题切换等高级功能。这种交互不仅增强了网页的互动性，还极大地提升了用户体验。

26.2 基础概念：DOM与CSSOM

在深入探讨CSS与JavaScript交互之前，有必要先了解两个核心概念：DOM（文档对象模型）和CSSOM（CSS对象模型）。

• DOM：是HTML和XML文档的编程接口，它提供了对文档的结构化表示，并允许开发者通过JavaScript等脚本语言动态地访问和修改文档的内容、结构和样式。
• CSSOM：是CSS在浏览器中被解析后形成的对象模型，它包含了文档中所有的样式信息，并允许JavaScript查询和修改这些样式。

当浏览器加载一个网页时，它会并行构建DOM和CSSOM，并在两者都构建完成后，将它们合并成一个渲染树（Render Tree），最终用于页面的渲染。因此，了解DOM和CSSOM对于理解CSS与JavaScript的交互至关重要。

26.3 JavaScript操作CSS的几种方式

JavaScript提供了多种方式来操作CSS，包括直接修改元素的style属性、操作类名、使用CSS变量以及通过CSSOM API等。

26.3.1 修改元素的style属性

最直接的方式是通过JavaScript直接修改DOM元素的style属性。这种方式适用于对单个样式属性的快速修改。

document.getElementById("myElement").style.color = "red";

26.3.2 操作类名

通过改变元素的类名，可以间接地应用或移除一组CSS样式。这种方式更加灵活，便于管理大量的样式变化。

// 添加类名
document.getElementById("myElement").classList.add("active");
// 移除类名
document.getElementById("myElement").classList.remove("inactive");
// 切换类名
document.getElementById("myElement").classList.toggle("hidden");

26.3.3 使用CSS变量

CSS变量（也称为CSS自定义属性）提供了一种在CSS中存储值并在整个文档中复用的方法。JavaScript可以读取和修改这些变量的值，从而实现全局样式的动态调整。

:root {
  --main-bg-color: #f0f0f0;
}
body {
  background-color: var(--main-bg-color);
}

document.documentElement.style.setProperty('--main-bg-color', '#007bff');

26.3.4 CSSOM API

CSSOM API提供了一系列用于访问和修改CSS样式表的接口。通过这些接口，JavaScript可以查询CSS规则、添加或删除样式表等。

// 获取第一个样式表的第一个规则
var firstRule = document.styleSheets[0].cssRules[0];
// 修改规则
firstRule.style.color = 'blue';
// 添加新的样式规则
var newStyle = document.createElement('style');
newStyle.type = 'text/css';
newStyle.appendChild(document.createTextNode('body { background-color: yellow; }'));
document.head.appendChild(newStyle);

26.4 实战案例：动态主题切换

接下来，我们将通过一个实战案例——动态主题切换功能，来展示CSS与JavaScript交互的实际应用。

假设我们有一个网站，用户可以根据个人喜好选择深色或浅色主题。我们可以通过JavaScript监听用户的点击事件，并根据用户的选择动态地修改CSS变量或类名，从而实现主题的切换。

<!-- HTML部分 -->
<button id="darkThemeBtn">切换到深色主题</button>
<button id="lightThemeBtn">切换到浅色主题</button>
<div class="content">
  <!-- 页面内容 -->
</div>
<!-- CSS部分 -->
<style>
  :root {
    --main-bg-color: #ffffff;
    --text-color: #000000;
  }
  .dark-theme {
    --main-bg-color: #333333;
    --text-color: #ffffff;
  }
  .content {
    background-color: var(--main-bg-color);
    color: var(--text-color);
  }
</style>
<!-- JavaScript部分 -->
<script>
  document.getElementById("darkThemeBtn").addEventListener("click", function() {
    document.body.classList.add("dark-theme");
  });
  document.getElementById("lightThemeBtn").addEventListener("click", function() {
    document.body.classList.remove("dark-theme");
  });
</script>

在这个例子中，我们定义了两个按钮用于切换主题，并在CSS中定义了深色和浅色主题对应的样式。通过JavaScript监听按钮的点击事件，并动态地给body元素添加或移除dark-theme类，从而实现了主题的切换。

26.5 性能优化与最佳实践

虽然CSS与JavaScript的交互能够带来丰富的用户体验，但不当的使用也可能导致性能问题。以下是一些性能优化与最佳实践的建议：

• 避免频繁操作DOM：DOM操作是昂贵的，应尽量减少不必要的DOM访问和修改。
• 使用CSS类名而非直接修改style属性：通过修改类名来应用样式变化，可以更有效地利用浏览器的样式计算优化。
• 利用CSS变量：CSS变量不仅提高了样式的可维护性，还能通过JavaScript动态修改，实现全局样式的快速调整。
• 注意CSSOM的构建时间：CSSOM的构建是渲染过程的一部分，应避免在DOM构建过程中阻塞CSS的加载。
• 利用现代浏览器的性能分析工具：使用Chrome DevTools等性能分析工具，可以帮助你识别和解决性能瓶颈。

26.6 总结

CSS与JavaScript的交互是现代Web开发中不可或缺的一部分。通过合理利用这两种技术，我们可以创建出既美观又功能强大的Web应用。本章从基础概念出发，介绍了JavaScript操作CSS的多种方式，并通过实战案例展示了CSS与JavaScript交互的实际应用。最后，还提供了性能优化与最佳实践的建议，帮助开发者更好地利用这一强大的组合。希望本章的内容能为你的Web开发之路提供有益的参考。