1. 開発者向けのウェブ技術
  2. Web API
  3. CSSStyleSheet
  4. CSSStyleSheet: addRule() メソッド

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

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

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告