Javascript cssRules
Rev.2を表示中。最新版はこちら。
1. 概要
Javascriptからスタイルシート内のルールを変更する際に必要になるcssRulesのまとめ。スタイルシートそのものを変更したい場合は「Javascript 動的なCSSの適用」を参照。
2. スタイルシート関連のオブジェクト
Javascriptからスタイルシートのルールを操る際に関係するオブジェクトを図1にまとめる。FireFoxとIEで若干扱いが異なるので注意が必要。
図1 スタイルシート関連オブジェクト
2.1 stylesheet オブジェクト
まずドキュメント内のスタイルシートを扱うstylesheetオブジェクトがある。stylesheetオブジェクトはドキュメントが読み込んでいるCSSファイルや<style>タグで指定したCSS毎に存在する。stylesheetオブジェクトはdocument.styleSheets配列で参照できる。
2.2 ルールオブジェクト
ルールオブジェクトはCSS内の"body {color:black}"などの各ルールを扱う。CSS内のルールの数だけルールオブジェクトが用意されている。このオブジェクトはFireFoxとIEで異なる。
FireFoxではstylesheet.cssRulesにCSSRuleオブジェクトが格納され、IEではstylesheet.rulesにRuleオブジェクトが格納されている。
FireFoxとIEでルールオブジェクトの名前、参照方法は異なるものの、同じように扱える。CSSRule,Ruleでよく使うプロパティを表1に示す。
表1 CSSRule,Ruleでよく使うプロパティ
|
プロパティ |
説明 |
|---|---|
| .selectorText |
セレクタ文字列 "body {color:black}"でいう"body"の部分 |
| .style |
styleオブジェクト(HTMLエレメントのnode.styleと同じ) rule.style.backgroundColor="blue"のようにしてルールを書き換えることが可能。 |
| .style.cssText |
ルールの文字列 "body {color:black}"でいう"color:black"の部分。 |
2.3 ルールを操作するメソッド
3. サンプル
スタイルシートのルールを書き換えていくサンプル。http://www.bit-hive.com/~tomita/JS/CSSRules/