本文深入探讨了在 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 对象提供了两种主要的属性访问方式：
点表示法 (Camel Case): 对于 CSS 属性名中包含连字符的，需要转换为驼峰命名法。例如，background-color 变为 backgroundColor，grid-row-start 变为 gridRowStart。方括号表示法 (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 这些属性值。
注意事项
跨域样式表限制： 由于安全原因，如果样式表是从不同源加载的（例如，通过 CDN 引入的第三方样式表），你可能无法通过 document.styleSheets 访问其 cssRules 属性。这将导致 SecurityError。在这种情况下，cssRules 属性会是 null 或抛出错误。动态修改样式： CSSStyleDeclaration 对象不仅可以读取属性，也可以用于设置属性。例如，rule.style.setProperty(‘grid-row-start’, ‘100’) 或 rule.style.gridRowStart = ‘100’ 可以动态修改该规则的样式。与 getComputedStyle 的区别： document.styleSheets 提供的样式是 CSS 规则中 声明 的样式。如果你需要获取一个元素 最终计算并应用 的样式（包括继承、层叠、浏览器默认样式等），应该使用 window.getComputedStyle(element) 方法。规则类型检查： 在遍历 cssRules 时，最好检查 rule 的类型，例如使用 instanceof CSSStyleRule，因为 cssRules 列表中可能包含 @media、@keyframes 等非样式规则，它们没有 style 属性。
总结
正确地从 document.styleSheets 中获取 CSS 样式规则的属性值，核心在于理解 CSSRule 对象与 CSSStyleDeclaration 对象之间的关系。始终通过 CSSRule 的 style 属性来访问具体的 CSS 声明。掌握这一机制，将使你能够更有效地在 JavaScript 中读取和操作页面样式，实现复杂的动态样式调整功能。
以上就是JavaScript 中 CSSRule 对象的属性访问指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/134333.html
微信扫一扫 
支付宝扫一扫 
