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 内のアイテムを追加または削除するには、下記のように、CSSStyleSheetdeleteRule() メソッドと insertRule() メソッドを使用します。
CSSStyleSheet.ownerRule
これが @import 規則を使用して document にインポートされたスタイルシートである場合、ownerRule は、その CSSImportRule を返す。そうでない場合、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
.sheet
document に適用される他のスタイルシート内の CSS @import 規則 はい .ownerRule CSSImportRule .styleSheet
(HTML でない) document 内の <?xml-stylesheet ?> 処理命令 はい .ownerNode ProcessingInstruction .sheet
HTTP Link Header はい N/A N/A N/A
ユーザーエージェントの (既定の) スタイルシート いいえ N/A N/A N/A

仕様

ブラウザーの実装状況

BCD tables only load in the browser

関連情報