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