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);
仕様書
| Specification |
|---|
| CSS Object Model (CSSOM) # dom-cssstylesheet-addrule |
ブラウザーの互換性
BCD tables only load in the browser