作者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