js动态创建样式：style和link
js动态创建样式: style 和 link
ie6 不能 ateElement('style') 然后append到head标签⾥。所以就到这样个好⽂章
有很多提供动态创建 style 节点的⽅法，但是⼤多数都仅限于外部的 css ⽂件。如何能使⽤程序⽣成的字符串动态创建 style 节点，我搞了2个⼩时。
静态外部 css ⽂件语法： @import url(style.css);
动态外部 css ⽂件加载的⽅法有如下：
第⼀种：创建link节点 href属性引⼊外部css, link节点append到⽂档中
在编写组件的情况下，为每个组件单独引⼊外部样式⽂件的⽅法不⼤好，⽐较理想的是js直接完成样式输出
var style = ateElement(’link’);
style.href = ’style.css’;
html document是什么
第⼆种简单：ateStyleSheet(style.css) // IE ONLY
第三种: 动态的 style 节点 // W3C
创建style节点 innerHTML属性写⼊样式内容，style节点append到head中 chrome firefox ⽀持
var style = ateElement(’style’);
style.innerHTML=”body{ background-color:blue; }”;
很遗憾，上⾯的代码在 ff ⾥⾯成功，但是 ie 不⽀持。从⽼外论坛得到代码：
var sheet = ateStyleSheet();
sheet.addRule(’body’,'background-color:red’);
成功，但是很⿇烦，要把字符串拆开写，长⼀点的写死，累的像狗⼀样。
接着搜，在⼀个不知道什么国家的什么语⾔的blog上到代码：
成功，此⼈实在厉害，但是问题出来了，url 最⼤ 255 个字符，长⼀点的就不⾏了，改：
window.style=”body{background-color:blue;”;
function blue(){
if(document.all){ // ateStyleSheet(url)
window.;
}else{ //ateElement(style)
var style = ateElement('style');
style.innerHTML="body{ background-color:blue }";
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。