CSSStyleSheet

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

CSSStyleSheet インターフェイスは、1 枚の CSS スタイルシートを表し、そのスタイルシートに含まれるルールのリストを調べたり変更したりすることができます。これは、その親の StyleSheet からプロパティとメソッドを継承しています。

StyleSheet CSSStyleSheet

スタイルシートは、そのスタイルシート内のそれぞれのルールを表す一連の CSSRule オブジェクトの集合から成ります。それらのルールには CSSRuleList があり、これはそのスタイルシートの cssRules プロパティから取得することができます。

例えば、1 つの CSSStyleRule オブジェクトが保持するスタイルは次のようなものです。

css
h1,
h2 {
  font-size: 16pt;
}

他にもアットルール、例えば @import や @media になることもあります。

スタイルシートの取得の節で CSSStyleSheet オブジェクトを取得するための様々な方法について説明しています。CSSStyleSheet オブジェクトは直接構築することもできます。コンストラクターと CSSStyleSheet.replace(), CSSStyleSheet.replaceSync() メソッドは新しい追加仕様で、スタイルシートの構築を行うことができます。

コンストラクター

CSSStyleSheet()

新しい CSSStyleSheet オブジェクトを生成します。

インスタンスプロパティ

親である StyleSheet からプロパティを継承しています。

  • CSSStyleSheet.cssRules 読取専用

    • : 生きた CSSRuleList を返します。これは、スタイルシートを構成する CSSRule オブジェクトの最新リストを維持します。

    メモ: 一部のブラウザーでは、スタイルシートが異なるドメインから読み込まれた場合、cssRules にアクセスすると SecurityError が発生します。

  • CSSStyleSheet.ownerRule 読取専用

    • : これが @import ルールを使用して文書にインポートされたスタイルシートである場合、ownerRule は、その CSSImportRule を返します。そうでない場合、null を返します。

インスタンスメソッド

親である Stylesheet からメソッドを継承しています。

CSSStyleSheet.deleteRule()

スタイルシートから、指定した位置のルールを削除します。

CSSStyleSheet.insertRule()

スタイルシート内の指定した位置に、テキスト表現で与えられた新しいルールを挿入します。

CSSStyleSheet.replace()

非同期にスタイルシートの内容を置き換え、更新された CSSStyleSheet で解決する Promise を返します。

CSSStyleSheet.replaceSync()

同期的にスタイルシートのコンテンツを置き換えます。

古いプロパティ

これらのプロパティは、Microsoft が導入した古いプロパティで、既存のサイトとの互換性を保つために維持されています。

rules 読取専用

rules プロパティは機能的に標準の cssRules プロパティと同等です。生きた CSSRuleList を返します。これは、スタイルシートを構成するすべてのルールの最新リストを維持します。

古いメソッド

これらのメソッドは、Microsoft が導入した古いメソッドであり、既存のサイトとの互換性を保つために維持されています。

addRule()

スタイルシートに、スタイルが適用されるセレクターと、一致する要素に適用するスタイルブロックを指定して、新しいルールを追加します。

これは、単一の文字列としてルール全体のテキスト表現を取る insertRule() とは異なります。

removeRule()

機能的には deleteRule() と等しく、このスタイルシートのルールリストから指定された位置のルールを削除します。

スタイルシートの取得

スタイルシートは、多くても 1 つの Document と関連付けられ、これに適用されます（disabled でない限り）。指定された文書の CSSStyleSheet オブジェクトのリストは、Document.styleSheets プロパティを使用して取得できます。それぞれのスタイルシートは、もしあれば、そのオーナーオブジェクト（Node または CSSImportRule）からもアクセスできます。

CSSStyleSheet オブジェクトは、文書でスタイルシートが読み込まれた時に、ブラウザーによって自動的に作成され、その文書の Document.styleSheets リストに挿入されます。

スタイルシートを文書と関連付ける方法のリスト（おそらく不完全）は次のとおりです。

スタイルシートが文書と関連付けられる理由 document.
styleSheets リストに出現 		指定されたスタイルシートオブジェクトのオーナー要素/ルールの取得 オーナーオブジェクトのインターフェイス オーナーからの CSSStyleSheet オブジェクトの取得
文書内の <style> および <link> 要素 はい .ownerNode HTMLLinkElement、
HTMLStyleElement、
SVGStyleElement の何れか 		HTMLLinkElement.sheet、
HTMLStyleElement.sheet、
SVGStyleElement.sheet の何れか
文書に適用された他のスタイルシート内の CSS @import ルール the document はい .ownerRule CSSImportRule .styleSheet
（HTML でない）文書の <?xml-stylesheet ?> 処理命令 はい .ownerNode ProcessingInstruction .sheet
HTTP の Link ヘッダー はい なし なし なし
（既定の）ユーザーエージェントスタイルシート いいえ なし なし なし

仕様書

Specification
CSS Object Model (CSSOM)
# the-cssstylesheet-interface

ブラウザーの互換性

BCD tables only load in the browser

関連情報