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