blob: 75ea4134e41ab6daa00f0645ff0e6a7e77d4911c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
---
title: CSSRuleList
slug: Web/API/CSSRuleList
tags:
- API
- CSSOM
- 参考
- 接口
translation_of: Web/API/CSSRuleList
---
<p>{{ APIRef("CSSOM") }}</p>
<p>CSS 规则列表 <code>CSSRuleList</code> 是一个（只允许间接更改的）类数组对象，包含着一个 <code><a href="/zh-CN/docs/Web/API/CSSRule">CSSRule</a></code> 对象的有序集合。</p>
<h2 id="描述">描述</h2>
<p>CSS 规则列表内的每一条 <code>CSSRule</code> 都可以通过 <code><var>rules</var>.item(<var>index</var>)</code>，或者更简单的 <code><var>rules</var>[<var>index</var>]</code> 的形式访问。这里的 <code><var>rules</var></code> 是一个实现了 <code>CSSRuleList</code> 接口的对象（例如 <code>{{domxref("CSSStylesheet","","",1)}}.cssRules</code>），而 <code><var>index</var></code> 是一个从 0 开始的、规则的位置索引，通过它获取规则时，顺序与 CSS 样式表中的顺序是一致的。规则对象的个数是 <code><var>rules</var>.length</code>。</p>
<p>注意，因为只能<em>间接更改</em>（<a href="https://www.w3.org/TR/cssom/#cssstylesheet">可更改</a>，但是其本身<a href="https://www.w3.org/TR/cssom/#cssrulelist">只拥有</a>读取方法），无法直接往规则列表中添加或移除规则，只能通过它的父样式表进行更改。事实上，{{domxref("CSSStyleSheet.insertRule",".insertRule()")}} 和 {{domxref("CSSStyleSheet.deleteRule",".deleteRule()")}} 甚至都不是 CSSRuleList 的方法，而是 {{domxref("CSSStyleSheet")}} 的。如果，处于一些原因，出现了一个没有父样式表 或者说不属于任何样式表的规则列表（可能是另一个规则列表的<em><a href="https://www.w3.org/TR/cssom/#cssstylesheet">拷贝</a></em>），那么，既不能将它分配到某个样式表下（因为<a href="https://www.w3.org/TR/cssom/#cssrulelist">没有适用的属性</a>），它也不能被分配给任何一个样式表（因为 <code>stylesheet.cssRules</code> 是<a href="https://www.w3.org/TR/cssom/#cssstylesheet">只读</a>属性），就只能通过遍历方法，将它一条规则一条规则地<strong>插入</strong>已有的样式表中。</p>
<h2 id="示例">示例</h2>
<pre class="brush: js">// 得到文档中第一个 CSS 样式表中的第一条规则
var first_rule = document.styleSheets[0].cssRules[0];
</pre>
<h2 id="参见">参见</h2>
<ul>
<li><code><a href="/zh-CN/docs/Web/API/CSSRule">CSSRule</a></code></li>
</ul>
<h3 id="CSSRuleList_的实现">CSSRuleList 的实现</h3>
<p>在 CSS 对象模型 CSSOM 中，有多个属性的返回值是一个 <code>CSSRuleList</code>。它们分别是：</p>
<ul>
<li>{{domxref("CSSStyleSheet")}} 属性 {{domxref("CSSStyleSheet/cssRules", "cssRules")}}</li>
<li>{{domxref("CSSMediaRule")}} 属性 {{domxref("CSSMediaRule/cssRules", "cssRules")}}</li>
<li>{{domxref("CSSKeyframesRule")}} 属性 {{domxref("CSSKeyframesRule/cssRules", "cssRules")}}</li>
<li>{{domxref("CSSMozDocumentRule")}} 属性 {{domxref("CSSMozDocumentRule/cssRules", "cssRules")}}</li>
</ul>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSSOM', '#the-cssrulelist-interface', 'CSSRuleList')}}</td>
<td>{{Spec2('CSSOM')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.CSSRuleList")}}</p>
|
