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