blob: ea0603819cf89d4e8b3632225016f1b48a51da58 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
---
title: CSSRuleList
slug: Web/API/CSSRuleList
tags:
- API
- CSSOM
- インターフェイス
- リファレンス
browser-compat: api.CSSRuleList
translation_of: Web/API/CSSRuleList
---
{{ APIRef("CSSOM") }}
`CSSRuleList` は読み取り専用の {{domxref("CSSRule")}} オブジェクトの順序付きコレクションを表します。
`CSSRuleList` オブジェクトは読み取り専用であり、直接変更することはできませんが、内容が変化していくことがあるので `live` オブジェクトと見なされます。
`CSSRule` オブジェクトが返す基本ルールを編集するには、 {{domxref("CSSStyleSheet")}} のメソッドである {{domxref("CSSStyleSheet.insertRule()")}} と {{domxref("CSSStyleSheet.deleteRule()")}} を使用します。
このインターフェイスにはコンストラクターがありません。 `CSSRuleList` のインスタンスは {{domxref("CSSStyleSheet.cssRules")}} と {{domxref("CSSKeyframesRule.cssRules")}} から返却されます。
## プロパティ
- {{domxref("CSSRuleList.length")}}{{ReadOnlyInline}}
- : このコレクション内の {{domxref("CSSRule")}} オブジェクトの数を表す整数を返します。
## メソッド
- {{domxref("CSSRuleList.item()")}}
- : 単一の {{domxref("CSSRule")}} を取得します。
## 例
以下の例には、 3 つのルールがあるスタイルシートがあります。 {{domxref("CSSStyleSheet.cssRules")}} を使用すると `CSSRuleList` を返し、それがコンソールに出力されます。
リスト内のルールの数は、 {{domxref("CSSRuleList.length")}} を使用してコンソールに出力されます。最初の {{domxref("CSSRule")}} は `0` を {{domxref("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]);
```
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- [`CSSRule`](/ja/docs/Web/API/CSSRule)
|
