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}  

 

这种写法不科学,你认为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
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