CSSGroupingRule.insertRule()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

insertRule() は CSSGroupingRule インターフェイスのメソッドで、新しい CSS ルールを CSS ルールのリストへ追加します。

構文

js
insertRule(rule);
insertRule(rule, index);

引数

rule

文字列です。

index省略可

省略可能で、このルールを挿入する位置です。既定値は 0 です。

返値

新しいルールの位置です。

例外

IndexSizeError DOMException

index が子 CSS ルールの数以上であった場合に発生します。

HierarchyRequestError DOMException

CSS で規定された制約により、リストの指定された（ゼロ起点の）インデックス位置に新しいルールが挿入できない場合に発生します。

InvalidStateError DOMException

新しいルールが @namespace アットルールで、子 CSS ルールのリストが @import アットルールと @namespace アットルール以外のものを含んでいる場合に発生します。

例

js
let myRules = document.styleSheets[0].cssRules;
myRules[0].insertRule(
  "html {background-color: blue;}",
  0,
); /* HTML 要素に対するルールを位置 0 に挿入します。 */

仕様書

Specification
CSS Object Model (CSSOM)
# dom-cssgroupingrule-insertrule

ブラウザーの互換性

BCD tables only load in the browser