JavaScript动态操作CSS：修改样式表规则方法

本文深入探讨了如何利用JavaScript动态操作CSS样式表，重点介绍了通过DOM API `document.styleSheets` 获取样式表对象，而非直接请求CSS文件文本的正确方法。文章剖析了常见的错误做法，强调了`CSSStyleSheet`对象的重要性，并提供了详细的代码示例，演示如何安全地遍历`cssRules`，读取、修改CSS规则，包括`CSSStyleRule`和`CSSMediaRule`。此外，还涵盖了查找和修改CSS变量（Custom Properties）的实用技巧。尤其适用于需要在浏览器扩展中动态调整网页样式的开发者。掌握这些技能，可以实现灵活、高效的Web样式控制，提升用户体验。

本教程旨在指导开发者如何正确地通过JavaScript访问和修改网页的CSSStyleSheet对象及其内部的CSS规则。我们将探讨直接通过DOM API `document.styleSheets` 获取样式表的方法，而非通过网络请求CSS文件，并详细演示如何遍历`cssRules`来读取或修改样式定义，从而实现动态样式调整，尤其适用于浏览器扩展开发场景。

引言：理解CSSStyleSheet与DOM访问

在现代Web开发中，动态调整网页样式是常见的需求，尤其是在开发浏览器扩展时。JavaScript提供了一套强大的API来与网页的样式表进行交互。核心在于CSSStyleSheet对象，它代表了一个独立的CSS样式表，并允许我们访问和操作其内部的CSS规则。理解如何正确地通过DOM API获取和操作这些对象至关重要。

常见误区：直接获取CSS文件文本

许多开发者在尝试动态修改CSS时，可能会误以为通过fetch API获取CSS文件的内容，然后直接对其进行解析或操作，就能达到修改样式表的目的。例如，在某些情况下，开发者可能会尝试通过fetch('some.css')获取CSS文本，然后尝试访问stylesheet.cssStyleSheet。

async function getColorVariablesWrong() {
  // 错误示范：通过fetch获取CSS文本
  const response = await fetch('https://www.youtube.com/s/desktop/7fca68b5/cssbin/www-main-desktop-watch-page-skeleton.css');
  const stylesheetText = await response.text();
  console.log('Fetched CSS text:', stylesheetText.substring(0, 200) + '...'); // 打印部分文本内容
  // 错误：stylesheetText是一个字符串，不具备cssStyleSheet属性
  const ruleList = stylesheetText.cssStyleSheet; // 这将是undefined
  console.log('Attempted access stylesheetText.cssStyleSheet:', ruleList); // 结果为 undefined
  // 后续操作将因ruleList为undefined而失败
}

// 调用错误示范函数
// getColorVariablesWrong();

这种方法是错误的，因为fetch返回的仅仅是CSS文件的纯文本内容，它不是一个DOM CSSStyleSheet对象。CSSStyleSheet对象是浏览器解析HTML文档时，为标签、