SYNCERのロゴ
アイキャッチ画像

CSSRuleList - CSSルールの集合

CSSRuleListは、CSSルールの集合を管理するための機能を備えたインターフェイスです。

概要

名前
CSSRuleList
IDL
[Exposed=Window,
 LegacyArrayClass]
interface CSSRuleList {
  getter CSSRule? item(unsigned long index);
  readonly attribute unsigned long length;
};
仕様書
https://drafts.csswg.org/cssom/#cssrulelist

チュートリアル

CSSRuleListはCSSStyleSheet.cssRulesが返します。先にStyleSheetListCSSStyleSheetを理解して下さい。

var styleSheet = document.styleSheets[0] ;
var cssRuleList = styleSheet.cssRules ;	// CSSRuleList

CSSルールの集合における単位は、宣言ブロックです。例えば下記のstyle要素(#hoge)は、4つのCSSルール(CSSRule)を含んだCSSRuleList、を備えるCSSStyleSheetです。

<style id="hoge">
a { color: red ; }
area { color: blue ; }
b { color: red ; }
blockquote { color: blue ; }
</style>
cssRuleList[0] ;	// a { color: red ; }
cssRuleList[1] ;	// area { color: blue ; }
cssRuleList[2] ;	// b { color: red ; }
cssRuleList[3] ;	// blockquote { color: blue ; }

コンストラクタ

コンストラクタはありません。

プロパティ

length

CSSルールの数を返します。

メソッド

item()

インデックス番号を指定してCSSルールを取得します。

定数

固有の定数はありません。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
CSSRuleList 8+
item() 8+
length 9+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月14日 (土)
コンテンツを公開しました。