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 }";
}
}