本教程旨在指导开发者如何在web页面和chrome扩展中正确访问和修改css样式表。文章将深入探讨使用`document.stylesheets` api来获取页面加载的样式表对象，并详细介绍如何遍历`cssrules`以读取和修改css规则，特别是针对css变量的操作，避免直接`fetch` css文件导致的常见误区。
在开发Web应用或Chrome扩展时，经常需要动态地读取或修改页面上已加载的CSS样式。一个常见的误区是尝试通过fetch API直接获取CSS文件内容，然后试图将其解析为CSSStyleSheet对象。这种方法通常会导致失败，因为fetch返回的只是纯文本内容，不具备DOM提供的CSSStyleSheet接口，并且可能受到跨域策略的限制。
理解CSS样式表的访问机制
浏览器在加载HTML文档时，会将所有内联样式、
CSSStyleSheet对象提供了丰富的API来检查和操作样式规则，例如访问其cssRules属性来获取所有CSS规则列表，或者使用insertRule()和deleteRule()方法来动态添加或移除规则。
使用document.styleSheets获取样式表
要访问页面上所有已加载的样式表，应使用document.styleSheets。这是一个类数组对象，包含了页面中所有CSSStyleSheet实例。
立即学习“前端免费学习笔记（深入）”；
// 获取页面上所有样式表
const styleSheets = document.styleSheets;
console.log(`页面共有 ${styleSheets.length} 个样式表。`);
// 遍历并打印每个样式表的URL或标题
for (let i = 0; i < styleSheets.length; i++) {
const sheet = styleSheets[i];
console.log(`样式表 ${i}:`);
console.log(` href: ${sheet.href || '内联/无链接'}`);
console.log(` title: ${sheet.title || '无标题'}`);
}解析CSSStyleSheet中的规则：cssRules
一旦获取到CSSStyleSheet对象，就可以通过其cssRules属性来访问其中包含的所有CSS规则。cssRules是一个CSSRuleList对象，包含了CSSRule实例。每个CSSRule对象代表一个CSS规则，例如一个样式声明块 (CSSStyleRule)、一个@media规则 (CSSMediaRule) 或一个@import规则 (CSSImportRule) 等。
要读取或修改具体的样式声明，我们需要关注CSSStyleRule。它的style属性是一个CSSStyleDeclaration对象，其中包含了该规则的所有CSS属性及其值。
以下示例展示了如何遍历样式表并访问其规则：
/**
* 遍历所有样式表和规则，提取CSS变量。
* @returns {Object} 包含所有CSS变量名称和值的对象。
*/
async function getColorVariablesFromDocument() {
const colorVariables = {};
const styleSheets = document.styleSheets;
for (let i = 0; i < styleSheets.length; i++) {
const sheet = styleSheets[i];
// 尝试访问cssRules，可能会因跨域安全限制而失败
try {
const ruleList = sheet.cssRules;
for (let j = 0; j < ruleList.length; j++) {
const rule = ruleList[j];
// 检查是否为CSSStyleRule (例如：div { color: red; })
if (rule instanceof CSSStyleRule) {
const styleDeclaration = rule.style;
// 遍历样式声明中的所有属性
for (let k = 0; k < styleDeclaration.length; k++) {
const propertyName = styleDeclaration[k]; // 获取属性名
// 检查是否为CSS变量 (以'--'开头)
if (propertyName.startsWith('--')) {
const propertyValue = styleDeclaration.getPropertyValue(propertyName);
// 进一步筛选颜色变量 (可选)
if (propertyValue.startsWith('#') || propertyValue.startsWith('rgb') || propertyValue.startsWith('hsl')) {
colorVariables[propertyName] = propertyValue;
}
}
}
}
// 也可以处理其他类型的规则，例如CSSMediaRule
// if (rule instanceof CSSMediaRule) {
// // 递归处理媒体查询内的规则
// }
}
} catch (e) {
// 捕获因跨域样式表访问cssRules引起的SecurityError
console.warn(`无法访问样式表 ${sheet.href || '内联'} 的规则:`, e.message);
}
}
return colorVariables;
}
// 示例调用
getColorVariablesFromDocument().then(variables => {
console.log("提取到的颜色变量:", variables);
});识别与操作CSS变量
CSS变量（或自定义属性）是Web开发中实现主题化和动态样式的重要工具。它们以--开头，例如--primary-color: #336699;。
要读取CSS变量的值，可以使用CSSStyleDeclaration.getPropertyValue('--variable-name')。 要修改CSS变量的值，可以使用CSSStyleDeclaration.setProperty('--variable-name', 'new-value')。
通常，CSS变量定义在:root选择器中，或者在特定的元素上。修改这些变量会影响到所有使用它们的元素。
以下示例展示了如何查找并修改页面上的CSS变量：
/**
* 查找并修改页面中的CSS变量。
* @param {string} variableName - 要修改的CSS变量名 (例如 '--primary-color')。
* @param {string} newValue - 变量的新值。
* @param {HTMLElement} [targetElement=document.documentElement] - 变量定义的目标元素，默认为文档根元素。
*/
function setCssVariable(variableName, newValue, targetElement = document.documentElement) {
if (!variableName.startsWith('--')) {
console.warn(`CSS变量名应以'--'开头。尝试修改: ${variableName}`);
variableName = `--${variableName}`; // 尝试修正
}
targetElement.style.setProperty(variableName, newValue);
console.log(`已将 ${variableName} 设置为 ${newValue}。`);
}
// 示例：将YouTube的主题颜色从深色切换为浅色（假设存在这些变量）
// 首先，尝试从页面中获取当前的CSS变量
getColorVariablesFromDocument().then(variables => {
console.log("当前页面颜色变量:", variables);
// 假设YouTube使用类似--yt-spec-brand-background的变量
// 这只是一个示例，实际变量名可能不同
if (variables['--yt-spec-brand-background']) {
console.log("发现YouTube品牌背景变量，尝试修改...");
setCssVariable('--yt-spec-brand-background', '#f0f0f0'); // 浅灰色背景
setCssVariable('--yt-spec-text-primary', '#333333'); // 深色文字
// 刷新页面或等待DOM更新，观察效果
} else {
console.log("未发现预期的YouTube颜色变量，可能需要进一步分析或手动插入样式。");
// 如果没有找到现有变量，也可以直接在:root上设置新的变量
// 或者通过chrome.scripting.insertCSS注入新的样式规则
}
});跨域样式表与安全限制
一个重要的注意事项是，出于安全原因，当样式表是从不同源（域名、协议或端口）加载时，sheet.cssRules属性将无法访问，会抛出SecurityError。这是为了防止恶意脚本读取其他网站的样式信息。
对于Chrome扩展，如果脚本运行在页面的上下文（例如通过content_scripts或chrome.scripting.executeScript注入），则可以访问同源样式表的cssRules。对于像YouTube这样的网站，其主要样式表通常是同源的，因此上述方法是可行的。然而，如果YouTube引入了来自CDN或其他域名的样式表，那么这些样式表的cssRules就无法直接访问。
在某些情况下，如果需要修改跨域样式，通常需要采取更复杂的策略，例如：
- 注入新的样式规则： 通过document.head.appendChild(styleElement)或chrome.scripting.insertCSS直接在页面中注入新的
- 修改元素内联样式： 直接修改特定元素的element.style属性。
总结与最佳实践
要正确地在Web页面和Chrome扩展中访问和修改CSS样式，请遵循以下最佳实践：
- 使用document.styleSheets： 这是获取页面所有CSSStyleSheet对象的标准和推荐方式，而不是通过fetch API。
- 遍历cssRules： 通过CSSStyleSheet.cssRules属性获取并遍历各个CSS规则。
- 识别CSSStyleRule： 对于样式声明块，检查rule instanceof CSSStyleRule，然后访问其style属性。
- 操作CSSStyleDeclaration： 使用getPropertyValue()读取属性值，使用setProperty()设置属性值，特别是对于CSS变量。
- 注意跨域限制： 对于从不同源加载的样式表，cssRules将无法访问。在这种情况下，考虑注入新的样式规则来覆盖现有样式。
- Chrome扩展上下文： 确保你的脚本在正确的上下文（如页面的content_scripts）中运行，以便能够访问document对象及其样式表。
通过理解和运用document.styleSheets和CSSStyleSheet API，开发者可以有效地实现动态主题切换、用户自定义样式等功能，从而提升用户体验和应用的灵活性。
