码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-06-20 22:18:16      阅读:422      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   java   http   tar   

一.动态创建link方式

我们可以使用link的方式.如下代码所示.

  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方式

 

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

五.打印引入js方式

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


 

JS动态引入js,CSS——动态创建script/link/style标签,布布扣,bubuko.com

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

标签:style   class   blog   java   http   tar   

原文地址:http://www.cnblogs.com/gyjWEB/p/3796039.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!