設定されているスタイルシートのルールを取得

設定されているスタイルシートのルールを取得するには、styleSheetRule.styleオブジェクトを使用します。
document.styleSheetsやstyle要素、各要素のcssRulesオブジェクト(IEの場合はrulesオブジェクト)から得ることができます。

styleオブジェクトにはいくつかの情報を得ることができます。
設定されているルールを文字列としてすべて得るにはcssTextプロパティ、設定されているルールのCSSプロパティ名だけを得たい場合は、インデックス番号を指定して取得します。

構文

var styles = styleSheetRule.style;

戻り値

ルールが格納されたオブジェクトを返します。

サンプルコード

JavaScript

var styles = document.getElementById('button').sheet.cssRules[11].style;

// 設定しているルールをすべて取得する場合
alert(styles.cssText); // "position: absolute; top: 10px; font-size: 12px;"のように得られる

// 設定しているCSSプロパティ名のみ取得する場合
alert(styles[1]); // "position"のように得られる"

サンプルコードにあるcssRulesオブジェクトについては、設定されているルールを配列(オブジェクト)で取得を参照してください。

JavaScript逆引きリファレンス一覧へ戻る