設定されているルールを配列(オブジェクト)で取得
設定されているスタイルシートのルールを配列(オブジェクト)で取得するには、styleSheet.cssRules
プロパティを使用します。
IE8以下の場合は、StyleSheet.rules
プロパティを使用します。
また、ルールの数を取得したい場合は、length
プロパティを使用します。
構文
var styleSheetRules = styleSheet.cssRules;
IEの場合
var styleSheetRules = styleSheet.rules;
戻り値
CSSRuleList(配列)を返します。
配列のアイテムは次のプロパティを持ちます。
プロパティ名 | 型 | 説明 |
---|---|---|
cssText | string | セレクターから宣言ブロックまでの文字列 |
parentRule | ※ 不明 | |
parentStyleSheet | CSSStyleSheet | 親のスタイルシートオブジェクト |
selectorText | string | CSSセレクター |
style | CSS2Properties | ブラウザが持っているCSSのプロパティ一覧 |
type | number | CSSの種類1 ... CSSStyleRule4 ... CSSMediaRule |
サンプルコード
JavaScript
var styleSheetRules = document.styleSheets[0].cssRules;
alert(styleSheetRules[1].cssText);
サンプルコードにあるstyleSheetsオブジェクトについては、ページに反映されているすべてのスタイルシートを配列(オブジェクト)で取得を、cssTextプロパティについては、設定されているルールを文字列で取得を参照してください。