CSSRuleList

CSS 规则列表 CSSRuleList 是一个(只允许间接更改的)类数组对象,包含着一个 CSSRule 对象的有序集合。

描述

CSS 规则列表内的每一条 CSSRule 都可以通过 rules.item(index),或者更简单的 rules[index] 的形式访问。这里的 rules 是一个实现了 CSSRuleList 接口的对象(例如 CSSStylesheet.cssRules),而 index 是一个从 0 开始的、规则的位置索引,通过它获取规则时,顺序与 CSS 样式表中的顺序是一致的。规则对象的个数是 rules.length

注意,因为只能间接更改可更改,但是其本身只拥有读取方法),无法直接往规则列表中添加或移除规则,只能通过它的父样式表进行更改。事实上,.insertRule().deleteRule() 甚至都不是 CSSRuleList 的方法,而是 CSSStyleSheet 的。如果,处于一些原因,出现了一个没有父样式表 或者说不属于任何样式表的规则列表(可能是另一个规则列表的拷贝),那么,既不能将它分配到某个样式表下(因为没有适用的属性),它也不能被分配给任何一个样式表(因为 stylesheet.cssRules只读属性),就只能通过遍历方法,将它一条规则一条规则地插入已有的样式表中。

示例

// 得到文档中第一个 CSS 样式表中的第一条规则
var first_rule = document.styleSheets[0].cssRules[0];

参见

CSSRuleList 的实现

在 CSS 对象模型 CSSOM 中,有多个属性的返回值是一个 CSSRuleList。它们分别是:

规范

规范 状态 备注
CSS Object Model (CSSOM)
CSSRuleList
Working Draft

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
CSSRuleListChrome Full support 1Edge Full support ≤18Firefox Full support 1IE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
itemChrome Full support 1Edge Full support 12Firefox Full support 1IE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
lengthChrome Full support 1Edge Full support 12Firefox Full support 25IE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 25Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown