JS動態引入js,CSS——動態建立script/link/style標籤

標籤：style   class   blog   java   http   tar   

一.動態建立link方式

我們可以使用link的方式.如下代碼所示.

[javascript] view plaincopyprint?

1. function addCssByLink(url){  
2.     var doc=document;  
3.     var link=doc.createElement("link");  
4.     link.setAttribute("rel", "stylesheet");  
5.     link.setAttribute("type", "text/css");  
6.     link.setAttribute("href", url);  
7.   
8.     var heads = doc.getElementsByTagName("head");  
9.     if(heads.length)  
10.         heads[0].appendChild(link);  
11.     else  
12.         doc.documentElement.appendChild(link);  
13. }  

 

•     var doc=document;  

•     var style=doc.createElement("style");  
•     style.setAttribute("type", "text/css");  
•   
•     if(style.styleSheet){// IE  
•         style.styleSheet.cssText = cssString;  
•     } else {// w3c  
•         var cssText = doc.createTextNode(cssString);  
•         style.appendChild(cssText);  
•     }  
•   
•     var heads = doc.getElementsByTagName("head");  
•     if(heads.length)  
•         heads[0].appendChild(style);  
•     else  
•         doc.documentElement.appendChild(style);  
• }  

這樣的話,如果是較少的代碼,可以比較方便的實現到動態載入css的效果,但是如果為了方便維護和管理,並沒有等待時間限制,使用link方式更加合適

"script");  

• script.setAttribute("type", "text/javascript");  
• script.setAttribute("src", "JustWalking.js");  
• var heads = document.getElementsByTagName("head");  
• if(heads.length)  
•     heads[0].appendChild(script);  
• else  
•     document.documentElement.appendChild(script);  

但是這種方式在IE核心的瀏覽器中支援，在google、360極速、firefox下卻不行

四.列印引入style方式

 

[javascript] view plaincopyprint?

1. document.write("<link rel=\"stylesheet\" href=\"uild/style.css\" type=\"text/css\" media=\"screen\"/>");  

五.列印引入js方式 [javascript] view plaincopyprint?

1. document.write("<script type=\"text/javascript\" src=\"JustWalking.js\"></script>");