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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
|
---
title: CSSStyleSheet
slug: Web/API/CSSStyleSheet
tags:
- API
- CSSOM
- CSSOM API
- CSSStyleSheet
- Interface
- Reference
- Stylesheets
- TopicStub
translation_of: Web/API/CSSStyleSheet
---
<p>{{ APIRef("CSSOM") }}</p>
<p><span class="seoSummary"><strong><code>CSSStyleSheet</code></strong> <span>接口</span>代表一个 <a href="/zh-CN/docs/Web/CSS">CSS</a> 样式表，并允许检查和编辑样式表中的规则列表。</span>它从父类型 {{domxref("StyleSheet")}} 继承属性和方法。</p>
<p>一个 CSS 样式表包含了一组表示规则的 {{domxref("CSSRule")}} 对象。每条 CSS 规则可以通过与之相关联的对象进行操作，这些规则被包含在 {{domxref("CSSRuleList")}} 内，可以通过样式表的 {{domxref("CSSStyleSheet.cssRules", "cssRules")}} 属性获取。</p>
<p>例如，{{domxref("CSSStyleRule")}} 对象中的一条规则可能包含这样的样式：</p>
<pre class="brush: css">h1, h2 {
font-size: 16pt;
}
</pre>
<p>另一条规则可能是一条“@”规则（<em>at-rule</em>），例如 {{cssxref("@import")}} 或 {{cssxref("@media")}} 等等。</p>
<p>在<a href="#说明">说明</a>部分中查看 <code>CSSStyleSheet</code> 对象的多种获取方式。</p>
<h2 id="属性">属性</h2>
<p>继承自 <em>{{domxref("StyleSheet")}}。</em></p>
<dl>
<dt id="cssRules">{{domxref("CSSStyleSheet.cssRules", "cssRules")}} {{ReadOnlyInline}}</dt>
<dd>
<p>返回一个实时的 {{domxref("CSSRuleList")}}，其中包含组成样式表的 {{domxref("CSSRule")}} 对象的一个最新列表。</p>
<p>这一般用于获取单条规则，如下：</p>
<pre><code>styleSheet.cssRules[i] // where i = 0..cssRules.length-1</code></pre>
<p>使用<code>CSSStyleSheet</code> 的 {{domxref("CSSStyleSheet.insertRule", "insertRule()")}} 和 {{domxref("CSSStyleSheet.deleteRule", "deleteRule()")}} 方法以在 <code>cssRules</code> 中添加或移除规则。</p>
</dd>
<dt id="ownerRule">{{domxref("CSSStyleSheet.ownerRule", "ownerRule")}} {{ReadOnlyInline}}</dt>
<dd>如果一个样式表示通过{{cssxref("@import")}} 规则引入文档，那么 <code>ownerRule</code> 属性会返回相应的{{domxref("CSSImportRule")}}对象，否则返回 <code>null</code>。</dd>
</dl>
<h2 id="方法">方法</h2>
<p>继承自 <em>{{domxref("StyleSheet")}}。</em></p>
<dl>
<dt id="deleteRule">{{domxref("CSSStyleSheet.deleteRule", "deleteRule()")}}</dt>
<dd>从样式表中删除特定位置的一条规则。</dd>
<dt id="insertRule">{{domxref("CSSStyleSheet.insertRule", "insertRule()")}}</dt>
<dd>向样式表的特定位置插入一条新规则，需要提供新规则的完整文本。</dd>
</dl>
<h2 id="遗留属性">遗留属性</h2>
<p><em>这些遗留属性是很久以前由微软提出的，不应该再使用，但这些属性短期内不会被移除。</em></p>
<dl>
<dt>{{domxref("CSSStyleSheet.rules", "rules")}} {{ReadOnlyInline}}</dt>
<dd><code>rules</code> 属性的功能与标准的{{domxref("CSSStyleSheet.cssRules", "cssRules")}}属性相同；它返回一个实时的 {{domxref("CSSRuleList")}}， 其中包含样式表中所有规则的一个最新列表。</dd>
</dl>
<h2 id="遗留方法">遗留方法</h2>
<p><em>这些遗留方法是很久以前由微软提出的，应尽量避免使用，但这些方法短期内不会被移除。</em></p>
<dl>
<dt>{{domxref("CSSStyleSheet.addRule", "addRule()")}}</dt>
<dd>
<p>向样式表添加一条新规则，需要提供应用样式的选择器和应用在匹配元素上的样式块。</p>
<p>这和 {{domxref("CSSStyleSheet.insertRule", "insertRule()")}} 不同，后者只是简单地将整个传入的规则文本当作一个字符串。</p>
</dd>
<dt>{{domxref("CSSStyleSheet.removeRule", "removeRule()")}}</dt>
<dd>与{{domxref("CSSStyleSheet.deleteRule", "deleteRule()")}}功能相同；从样式表的规则列表的特定位置中移除规则。</dd>
</dl>
<h2 id="说明">说明</h2>
<p>在一些浏览器中，如果一个样式表加载自不同的域，访问 <code>cssRules</code> 属性时会抛出 <code>SecurityError</code>。</p>
<p>一个样式表最多与一个{{domxref("Document")}}链接，即所应用的那个{{domxref("Document")}}（除非{{domxref("StyleSheet.disabled", "disabled")}}）。一个特定文档的 <code>CSSStyleSheet</code> 对象列表可用 {{domxref("document.styleSheets")}} 属性获取。一个特定的样式表也可以通过其所在对象（<code>Node</code> 或 <code>CSSImportRule</code>）获取，如果有的话。</p>
<p>在文档的样式表加载时，一个 <code>CSSStyleSheet</code> 对象由浏览器自动创建并插入至文档的{{domxref("Document.styleSheets")}}列表中。由于样式表列表不能直接修改，我们没有什么有效的手段取手动创建一个新的 <code>CSSStyleSheet</code> 对象（不过<a href="https://wicg.github.io/construct-stylesheets/">Constructable Stylesheet Objects</a>很快会来到web平台，而且Blink早已支持）。需要创建新的样式表就直接在文档中插入{{HTMLElement("style")}} 或 {{HTMLElement("link")}} 元素吧。</p>
<p>以下是将样式表链接到文档的一些方式（可能不完整）：</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">样式表与文档链接的原因</th>
<th scope="col">是否出现在<code>document.<br>
styleSheets</code> 列表中</th>
<th scope="col">获取样式表对象所在的元素/规则</th>
<th scope="col">所在对象的接口</th>
<th scope="col">从所在对象获取CSSStyleSheet对象</th>
</tr>
</thead>
<tbody>
<tr>
<td>文档中的{{HTMLElement("style")}} 和{{HTMLElement("link")}} 元素</td>
<td>是</td>
<td>{{domxref("StyleSheet.ownerNode", ".ownerNode")}}</td>
<td>{{domxref("HTMLLinkElement")}},<br>
{{domxref("HTMLStyleElement")}},<br>
或 {{domxref("SVGStyleElement")}}</td>
<td>{{domxref("LinkStyle.sheet", ".sheet")}}</td>
</tr>
<tr>
<td>使用CSS {{cssxref("@import")}} 从其他样式表导入并应用到文档的规则</td>
<td>是</td>
<td>{{domxref("CSSStyleSheet.ownerRule", ".ownerRule")}}</td>
<td>{{domxref("CSSImportRule")}}</td>
<td>{{domxref("CSSImportRule.styleSheet", ".styleSheet")}}</td>
</tr>
<tr>
<td><code><?xml-stylesheet ?></code> processing instruction in the (non-HTML) document</td>
<td>是</td>
<td>{{domxref("StyleSheet.ownerNode", ".ownerNode")}}</td>
<td>{{domxref("ProcessingInstruction")}}</td>
<td>{{domxref("LinkStyle.sheet", ".sheet")}}</td>
</tr>
<tr>
<td>HTTP链接头部</td>
<td>是</td>
<td><em>N/A</em></td>
<td>N/A</td>
<td>N/A</td>
</tr>
<tr>
<td>用户代理（默认）样式表</td>
<td>否</td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
</tr>
</tbody>
</table>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th>规范</th>
<th>状态</th>
<th>备注</th>
</tr>
<tr>
<td>{{SpecName("CSSOM", "#cssstylesheet", 'CSSStyleSheet')}}</td>
<td>{{Spec2("CSSOM")}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("DOM2 Style", "css.html#CSS-CSSStyleSheet", "CSSStyleSheet")}}</td>
<td>{{Spec2("DOM2 Style")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.CSSStyleSheet")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li><a href="/zh-CN/docs/Web/API/CSS_Object_Model">CSS Object Model</a></li>
<li><a href="/zh-CN/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information">Using dynamic styling information</a></li>
</ul>
|
