作者nightspirit (鞭策自己社清流夜靈)
看板Ajax
標題Re: IE動態插入CSS STYLE無效的問題
時間Wed Mar 16 02:42:54 2011
自問自答一下，因為IE對cssNode定義比較不同所以不能用一般的方法直接插入文檔
function apply_new_style() {
//if there is existing style element then remove it
if ($("#embeded").length !== 0) {
$("#embeded").remove();
}
var s = "body{background:" + style.bgcolor + ";}"
+ "body{background-image:url(" + style.bgimg + ");}"
+ "body{color:" + style.fontcolor + ";}";
var cssNode = document.createElement('style');
cssNode.type = "text/css";
cssNode.rel = "stylesheet";
cssNode.id= "embeded";
// Add style node to head
document.getElementsByTagName("head")[0].appendChild(cssNode);
// Add the text
// IE first
if (cssNode.styleSheet) {
cssNode.styleSheet.cssText = s;
// W3C follow
} else {
var cssTextNode = document.createTextNode(s);
cssNode.appendChild(cssTextNode);
}
}
用這個方法就可以抓JSON來創建一個動態的style block並放入文本中了。
※ 引述《nightspirit (鞭策自己社清流夜靈)》之銘言：
: 各位前輩好，目前我有一個根據input輸入的值動態改變頁面CSS的需求，
: 我的想法是利用JS來寫入一個STYLE BLOCK覆寫原本的樣式，
: 在Chrome跟Firefox這麼做是可行的，然而在IE上則不會有更動。
: 請問各位前輩是否有Dynamic CSS insertion實作的經驗？
: 還望有經驗的前輩分享一下在IE上的解法，謝謝 :)
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 64.166.83.198