CSSStyleSheet: insertRule() メソッド
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
CSSStyleSheet.insertRule() メソッドは、新しい CSS ルールを現在のスタイルシートに挿入します。
メモ:
insertRule() は CSSStyleSheet 専用のメソッドですが、実際にはルールを CSSStyleSheet.cssRules に、内部的には CSSRuleList に挿入します。
構文
js
insertRule(rule)
insertRule(rule, index)
引数
返値
スタイルシートのルールリスト内の、新たに挿入されたルールの位置です。
例外
IndexSizeErrorDOMException-
index>CSSRuleList.lengthの場合に発生します。 HierarchyRequestErrorDOMException-
CSS の制約上、
ruleを指定された位置に挿入できない場合に発生します。例えば、スタイルルールの後に@importアットルールを挿入しようとした場合です。 SyntaxErrorDOMException-
rule引数に 2 つ以上のルールが与えられた場合に発生します。 InvalidStateErrorDOMException-
ruleが@namespaceであり、ルールリストに@importおよび@namespace以外のアットルールが含まれている場合に発生します。
例
新しいルールの挿入
このスニペットは、新しいルールをスタイルシートの先頭に追加します。
js
myStyle.insertRule("#blanc { color: white }", 0);
スタイルシートルールを追加する関数
js
/**
* 文書にスタイルシートルールを追加します（スタイル情報を実際のスタイルシートに保持し、
* DOM に余分な要素を追加せずに済むよう、クラスを動的に変更する方がよい場合があります）。
* ECMAScript はオブジェクトの反復順序が予測可能であることを保証せず、CSS は順序に依存するため、
* 宣言とルールには配列が必要です。
* @param {Array} rules JSON でエンコードされた宣言の配列を受け取ります
* @example
addStylesheetRules([
['h2', // 2 番目の引数として配列の配列を指定することもできます
['color', 'red'],
['background-color', 'green', true] // !important ルールの場合は true
],
['.myClass',
['background-color', 'yellow']
]
]);
*/
function addStylesheetRules(rules) {
const styleEl = document.createElement("style");
// <style> 要素を <head> に追加
document.head.appendChild(styleEl);
// <style> 要素のスタイルシートを取得
const styleSheet = styleEl.sheet;
for (let rule of rules) {
let i = 1,
selector = rule[0],
propStr = "";
// ルールの 2 番目の引数が配列の配列であれば、変数を設定し直す
if (Array.isArray(rule[1][0])) {
rule = rule[1];
i = 0;
}
for (; i < rule.length; i++) {
const prop = rule[i];
propStr += `${prop[0]}: ${prop[1]}${prop[2] ? " !important" : ""};\n`;
}
// CSS ルールを挿入
styleSheet.insertRule(
`${selector}{${propStr}}`,
styleSheet.cssRules.length,
);
}
}
仕様書
| 仕様書 |
|---|
| CSS Object Model (CSSOM) # dom-cssstylesheet-insertrule |