Javascript 动态加载 CSS STYLE 元素
http://www.loveyuki.com/Article/Javascript_Load_Style_Elements.aspx
用 Javascript 动态加载一个 CSS 文件的方法很简单,但是如果想要加载一个 CSS STYLE 元素,里面写入一些 CSS 语句就没有那么简单了。不过也难不倒我们,查一查 MSDN 和 Mozilla 的开发网站就可以写出来了,下面的语句兼容了 IE,Firefox,Safari,Opera 没有测试。
1
function AttachStyle(ownDoc,styCss) {
2
var elmSty = ownDoc.createElement('STYLE');
3
elmSty.setAttribute("type", "text/css");
4
if (elmSty.styleSheet) {
5
elmSty.styleSheet.cssText=styCss;
6
} else {
7
elmSty.appendChild(ownDoc.createTextNode(styCss));
8
}
9
ownDoc.getElementsByTagName("head")[0].appendChild(elmSty);
10
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
这种写法不科学,你认为OO么?而且很不灵活,不适合Ajax异步转载!轻微鄙视一下!
最好使用CSS外部导入法加载!
1
function AttachStyle(){
2
this.load=function(URL) {
3
var css=document.createElement('link');
4
css.type="text/css";
5
css.rel="="stylesheet";
6
css.src=URL;
7
var head=document.getElementsByTagName("head")[0];
8
head.appendChild(css);
9
var self=this;
10![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
css.onload=css.onreadystatechange=function(){
12
if(this.readyState&&this.readyState=="loading") return;
13
self.onsuccess();
14
}
15
css.onerror=function(){
16
head.removeChild();
17
self.onfailure();
18
}
19
}
20
this.onsuccess=function(){}//加载成功事件
21
this.onfailure=function(){}//加载失败事件
22
}
23![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)