CSSRuleList
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
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
js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules);
console.log(myRules.length);
console.log(myRules[0]);
仕様書
Specification |
---|
CSS Object Model (CSSOM) # the-cssrulelist-interface |
ブラウザーの互換性
BCD tables only load in the browser