CSSStyleSheet

Baseline Widely available *

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

* Some parts of this feature may have varying levels of support.

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

スタイルシートは、そのスタイルシート内のそれぞれのルールを表す一連の 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