CSSRuleList

CSSRuleList 代表一个只读的 CSSRule 对象的有序集合。

虽然 CSSRuleList 对象是只读的，不能直接修改，但它被认为是一个 实时 对象，因为其内容会随着时间的推移而发生变化。

要编辑 CSSRule 对象返回的底层规则，请使用 CSSStyleSheet.insertRule() 和 CSSStyleSheet.deleteRule()，它们是 CSSStyleSheet 的方法。

此接口是创建不可修改列表的尝试，并且仅继续得到支持以避免破坏已使用它的代码。现代 API 使用基于 JavaScript 数组的类型来表示列表结构，从而使许多数组方法可用，同时对它们的用法施加额外的语义（例如，使它们的项目只读）。

这些历史原因并不意味着您作为开发者应该避免使用 CSSRuleList。您不会自己创建 CSSRuleList 对象，但您可以从 API（例如 CSSStyleSheet.cssRules 和 CSSKeyframesRule.cssRules）获得它们，这些 API 并未被弃用。但是，要注意与真实数组的语义差异。

实例属性

CSSRuleList.length 只读: 返回一个整数，表示集合中 CSSRule 对象的数量。

实例方法

CSSRuleList.item(): 获取单个 CSSRule。

示例

在下面的示例中，有一个包含三个规则的样式表。使用 CSSStyleSheet.cssRules 返回一个 CSSRuleList，它被打印到控制台。

列表中的规则数量使用 CSSRuleList.length 打印到控制台。第一个 CSSRule 可以通过将 0 作为 CSSRuleList.item 的参数来返回，在示例中，这将返回为 body 选择器设置的规则。

CSS

css

body {
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
  margin: 2em;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
}

.container > * {
  background-color: #3740ff;
  color: #fff;
}

JavaScript

let myRules = document.styleSheets[0].cssRules;
console.log(myRules);
console.log(myRules.length);
console.log(myRules[0]);

规范

规范
CSS 对象模型 (CSSOM) # the-cssrulelist-interface

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参见

CSSRule