CSSStyleSheet: addRule() メソッド
非推奨
この機能を新しいプロジェクトで使用することは避けてください。 この機能は、ウェブ標準やブラウザーから除去される可能性があります。
旧式の CSSStyleSheet インターフェイ���の addRule() は古いメソッドで、新しいルールをスタイルシートに追加します。このメソッドの使用を避け、より標準的な insertRule() メソッドを使用しましょう。
構文
js
addRule(selector, styleBlock, index)
引数
selector-
CSS ルールのセレクター部分を指定する文字列です。既定値は文字列
undefinedです。 styleBlock-
selectorに一致する要素に適用されるスタイルブロックを示す文字列です。既定値は文字列undefinedです。 index省略可-
オプションで、このスタイルシートの
CSSRuleListの中に新しいルールを挿入するための位置を指定します。indexが指定されなかった場合、現在リストにある最後の項目の次の位置（つまり、cssStyleSheet.cssRules.lengthの値）が使用されます。
返値
常に -1 を返します。
ルールを合法的に挿入できる場所に関するルールがやや難解なため、例外が発生する可能性があることに注意してください。詳細は insertRule() を参照してください。
使用上の注意
このメソッドはブラウザーでは、テンプレートリテラル `${selector}{${styleBlock}}` を使用して文字列を構築し、それから標準の insertRule() メソッドを呼び出すように実装されています。
従って、以下のような既存のコードがあった場合、
js
cssStyleSheet.addRule(selector, styles, 0);
次のようにして、もっと標準の insertRule() を使用して書き直すことができます。
js
cssStyleSheet.insertRule(`${selector} {${styles}}`, 0);
仕様書
| 仕様書 |
|---|
| CSS Object Model (CSSOM) # dom-cssstylesheet-addrule |