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

関連情報