本教程旨在指导开发者如何正确地通过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文档时，为标签、
正确获取CSSStyleSheet对象
要正确访问网页中的CSS样式表，应使用document.styleSheets属性。document.styleSheets返回一个StyleSheetList，这是一个类数组对象，包含了当前文档中所有可用的CSSStyleSheet对象。
立即学习“Java免费学习笔记（深入）”；
/**
* 获取当前文档中所有可访问的CSSStyleSheet对象
* @returns {CSSStyleSheet[]} 可访问的样式表数组
*/
function getAccessibleStyleSheets() {
const accessibleSheets = [];
for (let i = 0; i < document.styleSheets.length; i++) {
const sheet = document.styleSheets[i];
try {
// 尝试访问cssRules以检查是否可访问。
// 对于跨域样式表，直接访问cssRules会抛出SecurityError。
// 对于同源样式表或通过<style>标签定义的样式，这是正确的入口。
// 我们可以先尝试访问，然后捕获错误。
if (sheet.cssRules) { // 检查cssRules是否存在且可访问
accessibleSheets.push(sheet);
}
} catch (e) {
// 捕获跨域安全错误，跳过不可访问的样式表
if (e.name === 'SecurityError') {
console.warn('Skipping cross-origin stylesheet due to SecurityError:', sheet.href || 'inline style');
} else {
console.error('Error accessing stylesheet:', sheet.href || 'inline style', e);
}
}
}
return accessibleSheets;
}
const styleSheets = getAccessibleStyleSheets();
console.log('Found accessible stylesheets count:', styleSheets.length);
// 例如，访问第一个样式表并打印其href
if (styleSheets.length > 0) {
console.log('First accessible stylesheet href:', styleSheets[0].href || 'inline style');
}遍历与访问CSS规则（cssRules）
一旦获取了CSSStyleSheet对象，下一步就是访问其内部的CSS规则。CSSStyleSheet对象有一个cssRules属性，它返回一个CSSRuleList，其中包含了样式表中的所有CSSRule对象。每个CSSRule对象代表一个CSS规则，例如@media规则、@keyframes规则或最常见的CSSStyleRule（如body { color: red; }）。
遍历cssRules的示例如下：
/**
* 遍历指定CSSStyleSheet中的所有CSS规则并打印
* @param {CSSStyleSheet} styleSheet 要遍历的样式表
*/
function iterateCssRules(styleSheet) {
try {
const rules = styleSheet.cssRules;
if (!rules || rules.length === 0) {
console.warn('No rules found or accessible for this stylesheet:', styleSheet.href || 'inline style');
return;
}
console.log(`Iterating rules for stylesheet: ${styleSheet.href || 'inline style'}`);
for (let i = 0; i < rules.length; i++) {
const rule = rules[i];
console.log(` Rule ${i} (Type: ${rule.constructor.name}):`, rule.cssText.substring(0, 100) + '...'); // 打印规则文本
// 根据规则类型进行进一步处理
if (rule instanceof CSSStyleRule) {
// 这是一个普通的CSS样式规则，如 'body { color: red; }'
console.log(' Selector:', rule.selectorText);
console.log(' Style Declaration:', rule.style.cssText);
// 访问和修改具体的样式属性
// console.log(' Color property:', rule.style.color);
// rule.style.setProperty('color', 'blue'); // 示例：修改颜色
} else if (rule instanceof CSSMediaRule) {
// 这是一个@media规则
console.log(' Media query:', rule.media.mediaText);
// 可以递归遍历媒体查询内部的规则
// console.log(' Inner rules count:', rule.cssRules.length);
// for (let j = 0; j < rule.cssRules.length; j++) {
// console.log(' Inner rule:', rule.cssRules[j].cssText.substring(0, 50) + '...');
// }
}
// 还有其他类型的规则，如CSSKeyframesRule, CSSFontFaceRule等
}
} catch (e) {
if (e.name === 'SecurityError') {
console.warn('Cannot access rules of cross-origin stylesheet:', styleSheet.href || 'inline style');
} else {
console.error('Error iterating rules for stylesheet:', styleSheet.href || 'inline style', e);
}
}
}
// 示例：遍历所有可访问样式表的规则
const accessibleSheets = getAccessibleStyleSheets();
if (accessibleSheets.length > 0) {
accessibleSheets.forEach(sheet => iterateCssRules(sheet));
} else {
console.log('No accessible stylesheets found to iterate.');
}查找与修改CSS变量（Custom Properties）
在许多现代网站中，CSS变量（Custom Properties，如--primary-color）被广泛用于管理颜色、字体等。要动态修改这些变量，我们需要遍历样式规则，找到包含变量定义的规则，然后修改它们。CSS变量通常定义在:root选择器或特定元素的选择器中。
/**
* 查找并尝试修改网页中的CSS变量
* @param {string} variableName 要查找的CSS变量名（如'--primary-color'）
* @param {string} newValue 要设置的新值
* @returns {boolean} 如果至少一个变量被修改，则返回true
*/
function findAndModifyCssVariable(variableName, newValue) {
let modified = false;
const 
