Linuxなどのメモ書き

Javascript 動的なCSSの適用


1. 目的

ドキュメントのCSSファイルをJavascriptから動的に切替えるられるようにする。

2. CSSファイルの適用

2.1 CSS適用関数 - applyCSS()

以下のapplyCSS()関数は指定したドキュメントにCSSを適用する。呼び出し方は以下の通り。

applyCSS(document, "sample.css");
applyCSS(document, "http://xxx.xxx.com/sample.css");
applyCSS(document, "sample.css", 0);      
applyCSS()の引数
◎ doc
CSSを適用するドキュメント。
documentを指定するとWindowドキュメントにCSSが適用される。iframeのdocumentを指定すると、そのiframeにCSSが適用される。

cssfile
適用するCSSファイル名

overwrite
真だと既存のCSSに上書きする。(既存のCSSを削除してから適用する)
偽だと既存のCSSに追加適用する。
省略時は追加適用。

applyCSS()
function applyCSS(doc, cssfile, overwrite)
{
  if (typeof overwrite == "undefined")
    overwrite = 0;      // デフォルト:CSSの追加

  // 既存のCSSを削除
  if (overwrite && doc.styleSheets.length >= 1) {
    var links = doc.getElementsByTagName("link");
    for (var i = 0 ; i < links.length ; i++) {
      if (links[i].rel == "stylesheet")
        links[i].parentNode.removeChild(links[i]);
    }
  }

  // CSS追加
  if (document.all) {
    doc.createStyleSheet(cssfile);
  } else {
    var link = doc.createElement("link");
    link.rel = "stylesheet";
    link.href = cssfile;
    link.type = "text/css"
    doc.getElementsByTagName('head')[0].appendChild(link);
  }
}

2.2 解説

CSSをドキュメントに追加する際は、IEではdocument.createStyleSheet()を使用する。このメソッドを呼び出すとドキュメントに指定したCSSが追加される。第2引数でIndexを指定して、挿入位置を指定することもできる。仕様はこちら。一方、FireFoxではcreateStyleSheet()メソッドがないため、ドキュメントに直接<link>ノードを埋め込んでいく。

既存のCSSと入れ換えるためにCSSを削除する場合は、CSS削除用のメソッドというものは無いようなので、ドキュメント内の<link>ノードのうちスタイルシートに関するノードを探して、removeChild()で削除していく。document.styleSheetsからドキュメント内のスタイルシート一覧を取得できるのだが、このリストはReadOnlyとなっており、このリストを操作してスタイルシートを削除するようなことはできないみたい。

3. サンプル

applyCSS()を使ってiframe内のCSSファイルを切替えるサンプル。

http://www.bit-hive.com/~tomita/JS/IframeCSS/

4. CSSがらみの補足情報

4.1 スタイルシートの一覧の取得

document.styleSheetsでスタイルシートのリストを取得できる。document.styleSheets.lengthとすれば数も取得できる。ReadOnly。

関連ドキュメント:
http://developer.mozilla.org/ja/docs/DOM:document.styleSheets



最終更新 2007/03/23 16:58:17 - kztomita
(2007/03/22 12:18:54 作成)


リンク

その他のWiki
Linuxメモ
Xnuメモ

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

よくやる仕事

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

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

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

検索

Adsense
最近のコメント