CSSStyleSheet
CSSStyleSheet
インターフェイスは、1 枚の CSS スタイルシートを表します。これは、その親の StyleSheet
からプロパティとメソッドを継承します。
スタイルシートは、スタイル規則 ("h1,h2 { font-size: 16pt }"
)、様々な アット規則 (@import
, @media
, ...) 等の 規則 から構成されます。このインターフェイスは、スタイルシート内の規則のリストを調査および変更できます。
CSSStyleSheet オブジェクトを取得できる様々な方法は、補記 セクションを参照してください。
プロパティ
親である Stylesheet
からプロパティを継承します。
CSSStyleSheet.cssRules
-
現在の
CSSRuleList
を返す。これは、スタイルシート内のCSSRule
オブジェクトのリストです。 これは通常、次のように個々の規則へアクセスするために使用されます:styleSheet.cssRules[i] // where i = 0..cssRules.length
cssRules
内のアイテムを追加または削除するには、下記のように、CSSStyleSheet
のdeleteRule()
メソッドとinsertRule()
メソッドを使用します。 CSSStyleSheet.ownerRule
(en-US)-
これが
@import
規則を使用して document にインポートされたスタイルシートである場合、ownerRule
は、そのCSSImportRule
(en-US) を返す。そうでない場合、null
を返す。
メソッド
親である Stylesheet
からメソッドを継承します。
CSSStyleSheet.deleteRule
-
スタイルシートから、指定した位置の規則を削除する。
CSSStyleSheet.insertRule
-
スタイルシート内の指定した位置に新しい規則を挿入する。規則のテキスト表現が与えられます。
補記
一部のブラウザーでは、スタイルシートが異なるドメインから読み込まれている場合、cssRules
の呼び出しで SecurityError
が発生します。
スタイルシートは、多くても 1 個の Document
と関連付けられ、これに適用されます (disabled でない限り)。与えられた document の CSSStyleSheet
オブジェクトのリストは、document.styleSheets
プロパティを使用して取得できます。特定のスタイルシートは、もしあれば、その owner オブジェクト (Node
または CSSImportRule
) からもアクセスできます。
CSSStyleSheet
オブジェクトは、document のスタイルシートが読み込まれた時に、ブラウザーによって自動的に作成され、その document の styleSheets
リストに挿入されます。document.styleSheets
リストは直接変更できないため、新しい CSSStyleSheet
オブジェクトを手動で作成する手ごろな方法はありません (とはいえ、Constructable Stylesheet Objects が Web API のどこかに追加される可能性があります)。新しいスタイルシートを作成するには、<style>
要素か <link>
要素を document に挿入してください。
スタイルシートを document と関連付ける方法のリスト (おそらく未完成) は次のとおり:
スタイルシートが document と関連付けられる理由 | document .styleSheets リストに現れる |
スタイルシートオブジェクトを与える owner 要素または規則の取得 | owner オブジェクトのインターフェイス | CSSStyleSheet オブジェクトを owner から取得 |
---|---|---|---|---|
document 内の <style> 要素と <link> 要素 |
はい | .ownerNode |
HTMLLinkElement または HTMLStyleElement 、 SVGStyleElement (en-US) |
.sheet (en-US) |
document に適用される他のスタイルシート内の CSS @import 規則 |
はい | .ownerRule (en-US) |
CSSImportRule (en-US) |
.styleSheet (en-US) |
(HTML でない) document 内の <?xml-stylesheet ?> 処理命令 |
はい | .ownerNode |
ProcessingInstruction |
.sheet (en-US) |
HTTP Link Header | はい | N/A | N/A | N/A |
ユーザーエージェントの (既定の) スタイルシート | いいえ | N/A | N/A | N/A |
仕様
Specification |
---|
CSS Object Model (CSSOM) # the-cssstylesheet-interface |
ブラウザーの実装状況
BCD tables only load in the browser