Javascript 動的なCSSの適用

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

1. 目的

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

2. CSSファイルの設定

applyCSS()の引数

doc

CSSを適用するドキュメント。
documentを指定すると大元のドキュメントにCSSが適用される。iframeのdocumentを指定すると、そのiframeにCSSが適用される。

cssfile

適用するCSSファイル名

overwrite

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

function applyCSS(doc, cssfile, overwrite)
{
  if (typeof overwrite == "undefined")
    overwrite = 1;      // デフォルト: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.setAttribute("rel", "stylesheet");
    link.setAttribute("href", cssfile);
    link.setAttribute("type", "text/css");
    doc.getElementsByTagName('head')[0].appendChild(link);
  }
}

3. サンプル

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