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