首页 > 代码库 > JS动态引入js,CSS——动态创建script/link/style标签

JS动态引入js,CSS——动态创建script/link/style标签

一.动态创建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=http://www.mamicode.com/"uild/style.css\" type=\"text/css\" media=\"screen\"/>");  

五.打印引入js方式

[javascript] view plaincopyprint?
  1. document.write("<script type=\"text/javascript\" src=http://www.mamicode.com/"JustWalking.js\"></script>");