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
|
---
title: CSSStyleSheet
slug: Web/API/CSSStyleSheet
tags:
- API
- CSSOM
- Reference
translation_of: Web/API/CSSStyleSheet
---
<div>{{APIRef("CSSOM")}}</div>
<p><strong><code>CSSStyleSheet</code></strong> インターフェイスは、1 枚の <a href="/ja/docs/Web/CSS">CSS</a> スタイルシートを表します。これは、その親の {{domxref("StyleSheet")}} からプロパティとメソッドを継承します。</p>
<p>スタイルシートは、<em>{{domxref("CSSStyleRule", "スタイル規則", "", 1)}}</em><em> </em>("<code>h1,h2 { font-size: 16pt }"</code>)、様々な <em>@-規則</em> (<code>@import</code>, <code>@media</code>, ...) 等の <em>{{domxref("CSSRule", "規則", "", 1)}}</em> から構成されます。このインターフェイスは、スタイルシート内の規則のリストを調査および変更できます。</p>
<p>CSSStyleSheet オブジェクトを取得できる様々な方法は、{{anch("Notes", "補記")}} セクションを参照してください。</p>
<h2 id="Properties" name="Properties">プロパティ</h2>
<p><em>親である {{domxref("Stylesheet")}} からプロパティを継承します。</em></p>
<dl>
<dt id="cssRules">{{domxref("CSSStyleSheet.cssRules")}}</dt>
<dd>現在の {{domxref("CSSRuleList")}} を返す。これは、スタイルシート内の {{domxref("CSSRule")}} オブジェクトのリストです。<br>
これは通常、次のように個々の規則へアクセスするために使用されます:
<pre><code> styleSheet.cssRules[i] // where i = 0..cssRules.length</code></pre>
<code>cssRules</code> 内のアイテムを追加または削除するには、下記のように、<code>CSSStyleSheet</code> の <code>deleteRule()</code> メソッドと <code>insertRule()</code> メソッドを使用します。</dd>
<dt id="ownerRule">{{domxref("CSSStyleSheet.ownerRule")}}</dt>
<dd>これが {{cssxref("@import")}} 規則を使用して document にインポートされたスタイルシートである場合、<code>ownerRule</code> は、その {{domxref("CSSImportRule")}} を返す。そうでない場合、<code>null</code> を返す。</dd>
</dl>
<h2 id="Methods" name="Methods">メソッド</h2>
<p><em>親である {{domxref("Stylesheet")}} からメソッドを継承します。</em></p>
<dl>
<dt id="deleteRule">{{domxref("CSSStyleSheet.deleteRule")}}</dt>
<dd>スタイルシートから、指定した位置の規則を削除する。</dd>
<dt id="insertRule">{{domxref("CSSStyleSheet.insertRule")}}</dt>
<dd>スタイルシート内の指定した位置に新しい規則を挿入する。規則のテキスト表現が与えられます。</dd>
</dl>
<h2 id="Notes" name="Notes">補記</h2>
<p>一部のブラウザーでは、スタイルシートが異なるドメインから読み込まれている場合、<code>cssRules</code> の呼び出しで <code>SecurityError</code> が発生します。</p>
<p>スタイルシートは、多くても 1 個の {{domxref("Document")}} と関連付けられ、これに適用されます ({{domxref("StyleSheet.disabled", "disabled", "", 1)}} でない限り)。与えられた document の <code>CSSStyleSheet</code> オブジェクトのリストは、{{domxref("document.styleSheets")}} プロパティを使用して取得できます。特定のスタイルシートは、もしあれば、その <em>owner</em> オブジェクト (<code>Node</code> または <code>CSSImportRule</code>) からもアクセスできます。</p>
<p><code>CSSStyleSheet</code> オブジェクトは、document のスタイルシートが読み込まれた時に、ブラウザーによって自動的に作成され、その document の <code>styleSheets</code> リストに挿入されます。{{domxref("document.styleSheets")}} リストは直接変更できないため、新しい <code>CSSStyleSheet</code> オブジェクトを手動で作成する手ごろな方法はありません (とはいえ、<a href="http://tabatkins.github.io/specs/construct-stylesheets/">Constructable Stylesheet Objects</a> が Web API のどこかに追加される可能性があります)。新しいスタイルシートを作成するには、{{HTMLElement("style")}} 要素か {{HTMLElement("link")}} 要素を document に挿入してください。</p>
<p>スタイルシートを document と関連付ける方法のリスト (おそらく未完成) は次のとおり:</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">スタイルシートが document と関連付けられる理由</th>
<th scope="col"><code>document<br>
.styleSheets</code> リストに現れる</th>
<th scope="col">スタイルシートオブジェクトを与える owner 要素または規則の取得</th>
<th scope="col">owner オブジェクトのインターフェイス</th>
<th scope="col">CSSStyleSheet オブジェクトを owner から取得</th>
</tr>
</thead>
<tbody>
<tr>
<td>document 内の {{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>document に適用される他のスタイルシート内の 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>(HTML でない) document 内の <code><?xml-stylesheet ?></code> 処理命令</td>
<td>はい</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>はい</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="Specifications" name="Specifications">仕様</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>初期定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの実装状況</h2>
<p>{{Compat("api.CSSStyleSheet")}}</p>
<h2 id="See also" name="See also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information">動的なスタイル情報の利用</a></li>
</ul>
|
