DOM

：

インターフェイス

：

CSSRuleList インターフェイス

　 編集：2022.04.04 by T.A.

→MS

CSSRuleList は読み取り専用の CSSRule オブジェクトの順序付きコレクションを表します。

CSSRuleList オブジェクトは読み取り専用であり、直接変更することはできませんが、内容が変化していくことがあるので live オブジェクトと見なされます。

CSSRule オブジェクトが返す基本ルールを編集するには、CSSStyleSheet のメソッドである CSSStyleSheet.insertRule() と CSSStyleSheet.deleteRule() を使用します。

このインターフェイスにはコンストラクターがありません。CSSRuleList のインスタンスは CSSStyleSheet.cssRules と CSSKeyframesRule.cssRules から返却されます。

プロパティ
CSSRuleList.length 読取専用
このコレクション内の CSSRule オブジェクトの数を表す整数を返します。
メソッド
CSSRuleList.item()
単一の CSSRule を取得します。
例
以下の例には、 3 つのルールがあるスタイルシートがあります。CSSStyleSheet.cssRules を使用すると CSSRuleList を返し、それがコンソールに出力されます。

リスト内のルールの数は、CSSRuleList.length を使用してコンソールに出力されます。最初の CSSRule は 0 を CSSRuleList.item の引数に指定することで返されます。この例では body セレクターのルールセットが返されます。

CSS： 

body {
  font-family: system-ui,-apple-system,sans-serif;
  margin: 2em;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
}

.container > * {
  background-color: #3740ff;
  color: #fff;
}

JavaScript： 

let myRules = document.styleSheets[0].cssRules;
console.log(myRules);
console.log(myRules.length);
console.log(myRules[0]);
テスト
HTML：

ここに表示
スクリプト組み込み：



スクリプト：


スクリプト：



表示内容：
表示内容：