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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
insertRule

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support