本教程详细介绍了在JavaScript中如何正确访问和操作通过document.styleSheets获取的CSS规则（CSSRule）的样式属性。核心在于，CSS属性值需通过CSSRule对象的style属性来访问，而非直接在CSSRule对象上查找。文章提供了示例代码，并强调了使用驼峰命名法访问CSS属性的最佳实践，帮助开发者有效进行动态样式调整。
理解CSS规则对象与样式访问
在Web开发中，我们经常需要通过JavaScript动态地读取或修改页面样式。document.styleSheets接口提供了访问文档中所有样式表的能力，每个样式表又包含一个cssRules集合，其中包含了所有的CSS规则（CSSRule对象）。然而，许多开发者在尝试访问这些CSSRule对象的具体样式属性时会遇到困惑，因为直接在CSSRule对象上通过属性名（例如rule[‘grid-row-start’]）访问，往往会得到undefined。
这是因为CSSRule对象本身代表的是一个CSS规则的整体，比如一个选择器及其声明块，它并不直接存储具体的CSS属性值。这些属性值被封装在CSSRule对象的一个特定属性中。
考虑以下CSS规则：
.cartelle {
grid-row-start: 42;
grid-column-start: 69;
}
当尝试通过如下JavaScript代码访问其属性时，会发现newGridColumn和newGridRow均为undefined：
立即学习“Java免费学习笔记（深入）”；
// 假设 .cartelle 规则位于第一个样式表
const styleSheet = Array.from(document.styleSheets[0].cssRules);
// 过滤出包含 "cartelle" 的规则
const myRules = styleSheet.filter(ruleset => ruleset.selectorText && ruleset.selectorText.includes("cartelle"));
// 错误示例：直接访问CSSRule对象上的属性
for (let i = 0; i < myRules.length; i++) {
// 尝试直接访问 CSSRule 对象上的属性，这将返回 undefined
let newGridColumn = myRules[i][`grid-row-start`];
let newGridRow = myRules[i][`grid-column-start`];
console.log(`错误示例 - newGridColumn: ${newGridColumn}, newGridRow: ${newGridRow}`);
}
这种行为是正确的，因为CSSRule对象的设计并不是直接暴露这些属性。
正确访问样式属性：style属性
要正确访问CSSRule对象中的具体CSS属性值，我们需要使用其style属性。CSSRule对象（特别是CSSStyleRule类型，即我们常见的选择器规则）包含一个名为style的属性，这个style属性是一个CSSStyleDeclaration对象。所有具体的CSS属性及其对应的值都存储在这个CSSStyleDeclaration对象中。
CSSStyleDeclaration对象允许我们通过两种方式访问CSS属性：
- 中括号表示法 ([])： 适用于包含连字符（如grid-row-start）的CSS属性名。
- 点表示法 (.)： 适用于驼峰命名法（如gridRowStart）的CSS属性名。
以下是正确访问cartelle类规则中grid-row-start和grid-column-start属性的示例：
// 假设 .cartelle 规则位于第一个样式表
const styleSheet = Array.from(document.styleSheets[0].cssRules);
// 过滤出包含 "cartelle" 的规则
const myRules = styleSheet.filter(ruleset => ruleset.selectorText && ruleset.selectorText.includes("cartelle"));
// 正确示例：通过 .style 属性访问CSS属性
for (const rule of myRules) {
// 确保当前规则是 CSSStyleRule 类型，具有 style 属性
if (rule instanceof CSSStyleRule) {
// 使用中括号访问带连字符的属性名
let newGridColumn = rule.style[`grid-row-start`];
let newGridRow = rule.style[`grid-column-start`];
console.log(`正确示例 (中括号) - Grid Row Start: ${newGridColumn}, Grid Column Start: ${newGridRow}`);
// 也可以使用驼峰命名法访问属性
// 注意：grid-row-start 对应 gridRowStart，grid-column-start 对应 gridColumnStart
let newGridColumnCamel = rule.style.gridRowStart;
let newGridRowCamel = rule.style.gridColumnStart;
console.log(`正确示例 (驼峰命名) - Grid Row Start: ${newGridColumnCamel}, Grid Column Start: ${newGridRowCamel}`);
}
}
通过上述代码，newGridColumn和newGridRow将正确地获取到CSS规则中定义的42和69。
注意事项与最佳实践
- 驼峰命名法 (Camel Case)： 在JavaScript中，当通过点表示法访问CSS属性时，推荐使用驼峰命名法。例如，background-color应写成backgroundColor，font-size应写成fontSize。这使得代码更符合JavaScript的命名习惯，也更易读。
- CSSRule类型检查： 在实际应用中，document.styleSheets[0].cssRules可能包含多种类型的CSSRule（如@import规则、@media规则等）。只有CSSStyleRule（即普通的样式规则，如.class {}）才拥有style属性。在遍历cssRules时，最好进行类型检查，例如if (rule instanceof CSSStyleRule)，以避免访问不存在的属性而导致错误。
- 跨域限制 (CORS)： 出于安全考虑，如果样式表来自不同的源（即跨域），JavaScript可能无法访问其cssRules的内容，会抛出SecurityError。这是浏览器为了防止恶意脚本读取用户敏感信息而设置的安全策略。
-
动态修改样式： 一旦你通过rule.style获取了CSSStyleDeclaration对象，你也可以通过修改它的属性来动态改变样式规则。例如：
if (rule instanceof CSSStyleRule) { rule.style.gridRowStart = '100'; // 修改 grid-row-start 属性 rule.style.backgroundColor = 'red'; // 添加或修改 background-color 属性 }这种方式直接修改了样式表中的规则，会影响所有应用该规则的元素。
总结
在JavaScript中通过document.styleSheets操作CSS规则时，理解CSSRule对象与CSSStyleDeclaration对象之间的关系至关重要。核心要点是：CSS属性值并非直接存在于CSSRule对象上，而是通过其style属性（一个CSSStyleDeclaration对象）来访问。遵循这一原则，并结合驼峰命名法等最佳实践，开发者可以高效且准确地进行页面的动态样式操作。
暂无评论内容