CSSStyleSheet: CSSStyleSheet() コンストラクター
CSSStyleSheet()
コンストラクターは、新しい CSSStyleSheet
オブジェクトを生成します。これは、単一のスタイルシートを表します。
スタイルシートを構築した後は、CSSStyleSheet.replace()
、CSSStyleSheet.replaceSync()
、CSSStyleSheet.insertRule()
、CSSStyleSheet.deleteRule()
の各メソッドを使用して、新しいスタイルシートのルールを変更することができます。
このメソッドを使用して生成されたスタイルシートは「構築スタイルシート」(constructed stylesheet) と呼ばれます。
構築スタイルシートは、 ShadowRoot.adoptedStyleSheets
(en-US) および Document.adoptedStyleSheets
(en-US) を使用して文書やそのシャドウ DOM サブツリー間で共有することができます。
構文
js
new CSSStyleSheet()
new CSSStyleSheet(options)
引数
options
省略可-
以下のものを持つオブジェクトです。
baseURL
省略可-
スタイルシートの相対 URL の解決に用いる
baseURL
を格納した文字列。 media
省略可-
メディアルールのリストを含む
MediaList
、または単一のルールを含む文字列。 disabled
省略可-
論理値で、スタイルシートが無効かどうかを示します。既定で false になります。
例
次の例では、新しい CSSStyleSheet
が "print"
というメディアルールで構築されています。
コンソールで StyleSheet.media
を表示すると、このプリントルールの単一の項目を持つ MediaList
が返されます。
js
let stylesheet = new CSSStyleSheet({ media: "print" });
console.log(stylesheet.media);
スタイルシートのシャドウ DOM との共有
次のコードは、シートを構築し、CSSStyleSheet.replaceSync()
を呼び出して、シートにルールを追加する様子を表します。
js
// 空の「構築」スタイルシートを生成
const sheet = new CSSStyleSheet();
// シートにルールを適用
sheet.replaceSync("a { color: red; }");
そして、ShadowRoot
を作成し、このシートオブジェクトを配列内の ShadowRoot.adoptedStyleSheets
(en-US) プロパティに渡しています。
js
// 文書内に要素を作成し、シャドウルートを作成する
const node = document.createElement("div");
const shadow = node.attachShadow({ mode: "open" });
//シートをシャドウ DOM に導入
shadow.adoptedStyleSheets = [sheet];
配列に追加した後のスタイルシートは変更することができます。
次の例では、CSSStyleSheet.insertRule()
を使用して、同じシートに新しいルールを追加しています。
js
sheet.insertRule("* { background-color: blue; }");
// これで、文書の背景が青色になる
同じ文書内の複数のシャドウサブツリーで同じシートを共有することができます。
それ以外の例は、ShadowRoot.adoptedStyleSheets
(en-US) を参照してください。
仕様書
Specification |
---|
CSS Object Model (CSSOM) # dom-cssstylesheet-cssstylesheet |
ブラウザーの互換性
BCD tables only load in the browser