Linuxなどのメモ書き

Javascript cssRules


1. 概要

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

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

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



図1 スタイルシート関連オブジェクト

2.1 stylesheet オブジェクト

まずドキュメント内のスタイルシートを扱うstylesheetオブジェクトがある。stylesheetオブジェクトはドキュメントが読み込んでいるCSSファイルや<style>タグで指定したCSS毎に存在する。

ドキュメント内のstylesheetオブジェクトは全てdocument.styleSheetsに格納されており、document.styleSheets[0]のようにして参照できる。

使用例

document.styleSheets[0];     // 最初のスタイルシートオブジェクト
document.styleSheets.length; // オブジェクト数

2.2 ルールオブジェクト

ルールオブジェクトはCSS内の"body {color:black}"などの各ルールを扱う。stylesheetオブジェクトにはスタイルシート内のルールの数だけルールオブジェクトが用意されている。このオブジェクトは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"の部分。

ルールオブジェクトの使用例
// FireFox (CSSRule)
stylesheet.cssRules[0];      // 最初のルール
stylesheet.cssRules.length;  // ルールの数
stylesheet.cssRules[0].style.backgroundColor="blue";
                             // スタイルの書き換え

// IE (Rule)
stylesheet.rules[0];         // 最初のルール
stylesheet.rules.length;     // ルールの数
stylesheet.rules[0].style.backgroundColor="blue";
                             // スタイルの書き換え

// 上記の'stylesheet'はスタイルシートオブジェクト
// stylesheet = document.styleSheets[0];
// のようにして取得できる
//
// FireFoxとIEでオブジェクトは異なる(cssRules,rules)ものの
// プロパティなどはほぼ同じなので、同じように処理できる。

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

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

表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が削除される。
(*) ssはstylesheet object。

実際にドキュメント内のスタイルシートにルールを追加するには以下のようにすればよい。これは最初のスタイルシートに"body {color:blue}"のルールを追加している。

ルールの追加
// stylesheet object
var ss = document.styleSheets[0];
if (document.all) {
  // IE
  ss.addRule("body", "color:blue");
} else {
  // FireFox
  ss.insertRule("body {color:blue}", ss.cssRules.length);
}

3. サンプル

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

このサンプルはiframe内のスタイルシートに対し指定したルールをinsertRule(),addRule()で追加していく。Window下部に設定されているルールの情報を表示する。

iframeにはスタイルシートは1つしか用意していないので、doc.styleSheets[0]に対して固定的にinsertRule()/addRule()している。

関連ドキュメント

FireFox

IE


最終更新 2007/03/23 01:24:18 - kztomita
(2007/03/22 20:50:16 作成)
添付ファイル
stylesheet_obj.png - kztomita


リンク

その他のWiki
Linuxメモ
Xnuメモ

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

よくやる仕事

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

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

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

検索

Adsense
最近のコメント