1. ウェブ
  2. Web API
  3. CSSStyleSheet

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

CSSStyleSheet

Baseline 広く利用可能 *

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

* この機能の一部は、対応レベルが異なる場合があります。

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 ヘッダー はい なし なし なし
（既定の）ユーザーエージェントスタイルシート いいえ なし なし なし

仕様書

仕様書
CSS Object Model (CSSOM)
# the-cssstylesheet-interface

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告