动态加载CSS文件,这个时常会用到,一般搞前端,我们最先想到的就是用JS来实现,的确,JS可以很方便的控制CSS样式表文件的动态插入,以下两种方法:使用
一,使用
这点采用了YUI插件中的一个方法,有效解决了各大浏览器的兼容性问题,主要是使用style.appendChild(document.createTextNode(styles));采用createTextNode将CSS代码添加到
01
<script>
02
function includeStyleElement(styles,styleId) {
03
if (document.getElementById(styleId)) {
04
return
05
}
06
var style = document.createElement("style");
07
style.id = styleId;
08
//为ie设置属性
09
/*if (isIE()) {
10
style.type = "text/css";
11
style.media = "screen"
12
}*/
13
(document.getElementsByTagName("head")[0] || document.body).appendChild(style);
14
if (style.styleSheet) { //for ie
15
style.styleSheet.cssText = styles;
16
} else {//for w3c
17
style.appendChild(document.createTextNode(styles));
18
}
19
}
20
var styles = "#div{background-color: #FF3300; color:#FFFFFF }";
21
includeStyleElement(styles,"newstyle");
22
</script>
这样页面中的元素可以直接应用样式了,不管你的这些元素是不是通过脚本追加的。
二,页面中约会外部样式:
在中使用标签添加一个外部样式文件,这个方法相对简单,而且也不存在浏览器的兼容性问题,看代码:
**01
<script>
02
function includeLinkStyle(url) {
03
var link = document.createElement("link");
04
link.rel = "stylesheet";
05
link.type = "text/css";
06
link.href = url;
07
document.getElementsByTagName("head")[0].appendChild(link);
08
}
09
includeLinkStyle("/css/reset.cssv=20140222"
10
</script>**
如果使用的样式比较少,这种方法似乎有些小题大作,而非参考吧。