Linuxなどのメモ書き

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/

関連ドキュメント



最終更新 2007/03/22 21:11:54 - kztomita
(2007/03/22 20:50:16 作成)
添付ファイル
stylesheet_obj.png - kztomita


リンク

その他のWiki
Linuxメモ
Xnuメモ

会社
(有)ビットハイブ
受託開発やってます。

よくやる仕事

・Webシステム開発(LAMP環境)
・Linuxサーバー設定関連
サーバー移転作業代行

開発事例にデジタルカタログ/マンガビューワーを追加しました。

draggable.jsのスマホ対応版デモページを追加しました。説明はこちら

検索

Adsense
最近のコメント