JavaScript 中 CSSRule 对象的属性访问指南

本文深入探讨了在 JavaScript 中如何正确访问 document.styleSheets 获取到的 CSS 样式规则（CSSRule）中的属性值。许多开发者可能错误地尝试直接从 CSSRule 对象访问属性，导致获取到 undefined。本教程将明确指出，正确的做法是通过 CSSRule 对象的 style 属性来访问具体的 CSS 声明，并提供示例代码和最佳实践，帮助读者高效、准确地操作页面样式。

理解 CSSRule 对象与样式属性

在 javascript 中，我们可以通过 document.stylesheets 集合来访问页面加载的所有样式表。每个样式表对象（stylesheet）都包含一个 cssrules 属性，它是一个 cssrulelist，包含了该样式表中定义的所有 css 规则。每个 cssrule 对象代表一个独立的 css 规则，例如一个样式规则（cssstylerule）、一个 @media 规则（cssmediarule）等。

当我们需要获取一个样式规则（例如 .cartelle { grid-row-start: 42; }）中声明的具体 CSS 属性值时，一个常见的误区是直接尝试从 CSSRule 对象本身去访问这些属性，例如 rule[‘grid-row-start’]。然而，这种做法会导致获取到 undefined。这是因为 CSSRule 对象本身代表的是整个规则结构，而不是其内部的具体样式声明。

正确的做法是访问 CSSRule 对象（特别是 CSSStyleRule 类型）的 style 属性。style 属性返回一个 CSSStyleDeclaration 对象，这个对象包含了该规则中所有显式声明的 CSS 属性及其值。通过 CSSStyleDeclaration 对象，我们才能正确地访问到诸如 grid-row-start、grid-column-start 等具体的样式属性值。

正确访问 CSS 属性值

要从 CSSRule 中获取 CSS 属性值，你需要通过其 style 属性。CSSStyleDeclaration 对象提供了两种主要的属性访问方式：

1. 点表示法 (Camel Case): 对于 CSS 属性名中包含连字符的，需要转换为驼峰命名法。例如，background-color 变为 backgroundColor，grid-row-start 变为 gridRowStart。
2. 方括号表示法 (Hyphenated): 可以直接使用原始的连字符形式的 CSS 属性名作为字符串索引。例如，[‘background-color’] 或 [‘grid-row-start’]。

推荐使用方括号表示法，因为它直接对应 CSS 属性名，减少了转换的复杂性，尤其是在处理动态属性名时更为方便。

立即学习“Java免费学习笔记（深入）”；

示例代码：

假设我们有以下 CSS 样式：

.cartelle {
grid-row-start: 42;
grid-column-start: 69;
background-color: blue;
}
.another-class {
color: red;
}

以下 JavaScript 代码演示了如何正确地获取 .cartelle 类的 grid-row-start 和 grid-column-start 属性值：

// 获取第一个样式表（通常是页面中定义的第一个或内联样式）
const styleSheet = document.styleSheets[0];
if (styleSheet) {
// 将 CSSRuleList 转换为数组，以便使用 filter 方法
const cssRulesArray = Array.from(styleSheet.cssRules);
// 过滤出包含 "cartelle" 选择器的规则
const myRules = cssRulesArray.filter(rule =>
rule.selectorText && rule.selectorText.includes("cartelle")
);
console.log(`找到 ${myRules.length} 条包含 "cartelle" 的规则。`);
// 遍历匹配到的规则
for (const rule of myRules) {
// 确保是 CSSStyleRule 类型，它才有 style 属性
if (rule instanceof CSSStyleRule) {
// 通过 rule.style 访问具体的 CSS 属性值
let newGridColumn = rule.style['grid-column-start'];
let newGridRow = rule.style['grid-row-start'];
let backgroundColor = rule.style.backgroundColor; // 也可以使用驼峰命名法
console.log(`规则选择器: ${rule.selectorText}`);
console.log(`grid-column-start: ${newGridColumn}`);
console.log(`grid-row-start: ${newGridRow}`);
console.log(`background-color: ${backgroundColor}`);
} else {
console.log(`跳过非样式规则: ${rule.type}`);
}
}
} else {
console.log("未找到任何样式表。");
}

在上述代码中，我们首先获取了样式表，然后筛选出目标规则。关键在于 rule.style[‘grid-column-start’] 和 rule.style[‘grid-row-start’]。这样，你就能正确地获取到 42 和 69 这些属性值。

注意事项

1. 跨域样式表限制： 由于安全原因，如果样式表是从不同源加载的（例如，通过 CDN 引入的第三方样式表），你可能无法通过 document.styleSheets 访问其 cssRules 属性。这将导致 SecurityError。在这种情况下，cssRules 属性会是 null 或抛出错误。
2. 动态修改样式： CSSStyleDeclaration 对象不仅可以读取属性，也可以用于设置属性。例如，rule.style.setProperty(‘grid-row-start’, ‘100’) 或 rule.style.gridRowStart = ‘100’ 可以动态修改该规则的样式。
3. 与 getComputedStyle 的区别： document.styleSheets 提供的样式是 CSS 规则中 声明 的样式。如果你需要获取一个元素 最终计算并应用 的样式（包括继承、层叠、浏览器默认样式等），应该使用 window.getComputedStyle(element) 方法。
4. 规则类型检查： 在遍历 cssRules 时，最好检查 rule 的类型，例如使用 instanceof CSSStyleRule，因为 cssRules 列表中可能包含 @media、@keyframes 等非样式规则，它们没有 style 属性。

总结

正确地从 document.styleSheets 中获取 CSS 样式规则的属性值，核心在于理解 CSSRule 对象与 CSSStyleDeclaration 对象之间的关系。始终通过 CSSRule 的 style 属性来访问具体的 CSS 声明。掌握这一机制，将使你能够更有效地在 JavaScript 中读取和操作页面样式，实现复杂的动态样式调整功能。