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
|
---
title: CSSStyleSheet
slug: Web/API/CSSStyleSheet
tags:
- API
- CSSOM
- NeedsTranslation
- Reference
- TopicStub
translation_of: Web/API/CSSStyleSheet
---
<div>{{APIRef("CSSOM")}}</div>
<p>The <strong><code>CSSStyleSheet</code></strong> interface represents a single <a href="/en-US/docs/Web/CSS">CSS</a> style sheet. It inherits properties and methods from its parent, {{domxref("StyleSheet")}}.</p>
<p>A style sheet consists of <em>{{domxref("CSSRule", "rules", "", 1)}}</em>, such as <em>{{domxref("CSSStyleRule", "style rules", "", 1)}}</em><em> </em>("<code>h1,h2 { font-size: 16pt }"</code>), various <em>at-rules</em> (<code>@import</code>, <code>@media</code>, ...), etc. This interface lets you inspect and modify the list of rules in the stylesheet.</p>
<p>See the {{anch("Notes")}} section for the various ways a CSSStyleSheet object can be obtained.</p>
<h2 id="Properties">Properties</h2>
<p><em>Inherits properties from its parent, {{domxref("StyleSheet")}}.</em></p>
<dl>
<dt id="cssRules">{{domxref("CSSStyleSheet.cssRules")}}</dt>
<dd>Returns a live {{domxref("CSSRuleList")}}, listing the {{domxref("CSSRule")}} objects in the style sheet.<br>
This is normally used to access individual rules like this:
<pre><code> styleSheet.cssRules[i] // where i = 0..cssRules.length-1</code></pre>
To add or remove items in <code>cssRules</code>, use the <code>CSSStyleSheet</code>'s <code>deleteRule()</code> and <code>insertRule()</code> methods, described below.</dd>
<dt id="ownerRule">{{domxref("CSSStyleSheet.ownerRule")}}</dt>
<dd>If this style sheet is imported into the document using an {{cssxref("@import")}} rule, the <code>ownerRule</code> property will return that {{domxref("CSSImportRule")}}, otherwise it returns <code>null</code>.</dd>
</dl>
<h2 id="Methods">Methods</h2>
<p><em>Inherits methods from its parent, {{domxref("Stylesheet")}}.</em></p>
<dl>
<dt id="deleteRule">{{domxref("CSSStyleSheet.deleteRule()")}}</dt>
<dd>Deletes a rule at the specified position from the style sheet.</dd>
<dt id="insertRule">{{domxref("CSSStyleSheet.insertRule()")}}</dt>
<dd>Inserts a new rule at the specified position in the style sheet, given the textual representation of the rule.</dd>
</dl>
<h2 id="Notes">Notes</h2>
<p>In some browsers, if a stylesheet is loaded from a different domain, calling <code>cssRules</code> results in <code>SecurityError</code>.</p>
<p>A stylesheet is associated with at most one {{domxref("Document")}}, which it applies to (unless {{domxref("StyleSheet.disabled", "disabled", "", 1)}}). A list of <code>CSSStyleSheet</code> objects for a given document can be obtained using the {{domxref("document.styleSheets")}} property. A specific style sheet can also be accessed from its <em>owner</em> object (<code>Node</code> or <code>CSSImportRule</code>), if any.</p>
<p>A <code>CSSStyleSheet</code> object is created and inserted into the document's <code>styleSheets</code> list automatically by the browser, when a style sheet is loaded for a document. As the {{domxref("document.styleSheets")}} list cannot be modified directly, there's no useful way to create a new <code>CSSStyleSheet</code> object manually (although <a href="https://wicg.github.io/construct-stylesheets/">Constructable Stylesheet Objects</a> is coming to the web platform soon and is already supported in Blink). To create a new stylesheet, insert a {{HTMLElement("style")}} or {{HTMLElement("link")}} element into the document.</p>
<p>A (possibly incomplete) list of ways a style sheet can be associated with a document follows:</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Reason for the style sheet to be associated with the document</th>
<th scope="col">Appears in <code>document.<br>
styleSheets</code> list</th>
<th scope="col">Getting the owner element/rule given the style sheet object</th>
<th scope="col">The interface for the owner object</th>
<th scope="col">Getting the CSSStyleSheet object from the owner</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{HTMLElement("style")}} and {{HTMLElement("link")}} elements in the document</td>
<td>Yes</td>
<td>{{domxref("StyleSheet.ownerNode", ".ownerNode")}}</td>
<td>{{domxref("HTMLLinkElement")}},<br>
{{domxref("HTMLStyleElement")}},<br>
or {{domxref("SVGStyleElement")}}</td>
<td>{{domxref("LinkStyle.sheet", ".sheet")}}</td>
</tr>
<tr>
<td>CSS {{cssxref("@import")}} rule in other style sheets applied to the document</td>
<td>Yes</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>Yes</td>
<td>{{domxref("StyleSheet.ownerNode", ".ownerNode")}}</td>
<td>{{domxref("ProcessingInstruction")}}</td>
<td>{{domxref("LinkStyle.sheet", ".sheet")}}</td>
</tr>
<tr>
<td>HTTP Link Header</td>
<td>Yes</td>
<td><em>N/A</em></td>
<td>N/A</td>
<td>N/A</td>
</tr>
<tr>
<td>User agent (default) style sheets</td>
<td>No</td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
</tr>
</tbody>
</table>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th>Specification</th>
<th>Status</th>
<th>Comment</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="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("api.CSSStyleSheet")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information">Using dynamic styling information</a></li>
</ul>
|
