MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

仕様

仕様書 策定状況 備考
CSS Object Model (CSSOM)
CSSStyleSheet の定義
草案
Document Object Model (DOM) Level 2 Style Specification
CSSStyleSheet の定義
勧告 初期定義

ブラウザーの実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート (有) (有) 9.0 (有) (有)
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート (有) (有) (有) (有) (有)

関連情報

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: Marsf, fscholz, ethertank, sosleepy, asmedrano
 最終更新者: Marsf,