JavaScriptによって動的に CSSを追加する場合のブラウザごとの挙動の違い

（2011/3/29追記：Firefox4とChrome10の実験結果を追加。）


JavaScriptに続いて、動的にCSS（またはstyle要素）を追加する場合の、追加方法の違いによるブラウザごとの挙動も調べた。


調査に使ったJavaScript（HTML5なのでtype属性は省略してある。）

window.onload = function() {
    // divのinnerHTMLに外部CSSの読み込みを突っ込む
    try {
        var div1 = document.createElement("div");
        div1.innerHTML = '<link rel="stylesheet" href="test1.css" />';
        document.body.appendChild(div1);
    } catch(e) {
    }
    
    // createElementでlink要素を生成して外部CSSを読み込む
    try {
        var link2 = document.createElement("link");
        link2.rel = "stylesheet";
        link2.href = "test2.css";
        document.getElementsByTagName("head")[0].appendChild(link2);
    } catch(e) {
    }
    
    // divのinnerHTMLに生のstyleを突っ込む
    try {
        var div3 = document.createElement("div");
        div3.innerHTML = '<style>#test3{ color: red }</style>';
        document.body.appendChild(div3);
    } catch(e) {
    }
    
    // createElementで生のstyleを追加する
    try {
        var style4 = document.createElement("style");
        style4.innerHTML = "#test4{ color: red }";
        document.getElementsByTagName("head")[0].appendChild(style4);
    } catch(e) {
    }
};

test1.css

#test1{ color: red }

test2.css

#test2{ color: red }

結果は下記の通り。

ブラウザ	1	2	3	4
IE 8	Ｘ	Ｏ	Ｘ	Ｘ
Firefox 3.6	Ｏ	Ｏ	Ｏ	Ｏ
Firefox 4.0	Ｏ	Ｏ	Ｏ	Ｏ
Chrome 4	Ｏ	Ｏ	Ｏ	Ｘ
Chrome 10	Ｏ	Ｏ	Ｏ	Ｏ
Safari 4	Ｏ	Ｏ	Ｏ	Ｘ
Opera 10.53	Ｏ	Ｏ	Ｏ	Ｏ

やはりIEではcreateElementで外部ファイルを読み込む方法しか動かない。
（ちなみに外部ファイルはhead要素でなくbody要素にappendChild()してもOKだった。）

でもChrome、SafariやOperaでほぼ動いたのが意外だった。


（2011/3/29 追記）
style 要素を動的に生成する - m2の方法を使えば、innerHTMLに生のstyleを突っ込むことができる。IE8、Firefox4、Chrome10、Opera11で動作することを確認した。