(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 | X | O | X | X |
Firefox 3.6 | O | O | O | O |
Firefox 4.0 | O | O | O | O |
Chrome 4 | O | O | O | X |
Chrome 10 | O | O | O | O |
Safari 4 | O | O | O | X |
Opera 10.53 | O | O | O | O |
やはりIEではcreateElementで外部ファイルを読み込む方法しか動かない。
(ちなみに外部ファイルはhead要素でなくbody要素にappendChild()してもOKだった。)
でもChrome、SafariやOperaでほぼ動いたのが意外だった。
(2011/3/29 追記)
style 要素を動的に生成する - m2の方法を使えば、innerHTMLに生のstyleを突っ込むことができる。IE8、Firefox4、Chrome10、Opera11で動作することを確認した。
0 件のコメント:
コメントを投稿