Rev.5を表示中。最新版はこちら。

1. 概要

Javascriptからスタイルシート内のルールを変更する際に必要になるcssRulesのまとめ。スタイルシートそのものを変更したい場合は「Javascript 動的なCSSの適用」を参照。

2. スタイルシート関連のオブジェクト

Javascriptからスタイルシートのルールを操る際に関係するオブジェクトを図1にまとめる。FireFoxとIEで若干扱いが異なるので注意が必要。

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に示す。

プロパティ	説明
.selectorText	セレクタ文字列 "body {color:black}"でいう"body"の部分
.style	styleオブジェクト(HTMLエレメントのnode.styleと同じ) rule.style.backgroundColor="blue"のようにしてルールを書き換えることが可能。
.style.cssText	スタイルの文字列 "body {color:black}"でいう"color:black"の部分。

2.3 ルールを操作するメソッド

stylesheetオブジェクトにはルールを追加/削除するメソッドがあるが、これもFireFoxとIEで異なる。表2参照。

ブラウザ	追加メソッド	削除メソッド
FireFox	insertRule(rule, index)	deleteRule(index)
	呼出例： ss.insertRule("body {color:black}", 0) ruleにはセレクタとスタイルを組み合わせた文字列を指定する(CSSファイルに書くイメージそのまま)。 indexはCSSRuleを挿入する場所。	呼出例：ss.deleteRule(0) 指定した位置のCSSRuleを削除する。
IE	addRule(selector, style[, index])	removeRule([index])
	呼出例： ss.addRule("body", "color:black", 0) FireFoxと異なり、セレクタとスタイルを別々の引数で渡す。 index値は省略可能。省略した場合は末尾に挿入される。	呼出例： ss.removeRule(0) 指定した位置のRuleを削除する。省略した場合は最後のRuleが削除される。

3. サンプル

スタイルシートのルールを書き換えていくサンプル。
http://www.bit-hive.com/~tomita/JS/CSSRules/

関連ドキュメント

FireFox

• http://developer.mozilla.org/en/docs/DOM:stylesheet

IE

• http://msdn.microsoft.com/workshop/author/dhtml/reference/collections/stylesheets.asp
• http://msdn.microsoft.com/workshop/author/dhtml/reference/collections/rules.asp
  
• http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/addrule.asp