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

最新推荐文章于 2023-09-20 11:55:31 发布

转载最新推荐文章于 2023-09-20 11:55:31 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/henuyuxiang/p/6215706.html

文章标签：

#javascript #ViewUI

本文介绍了五种动态加载CSS及JS文件的技术方案，包括使用link、style、script标签及document.write方法。针对不同场景对比了link与style加载CSS的区别，并讨论了它们在网络请求上的优劣。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.动态创建link方式

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

function addCssByLink(url){  
    var doc=document;  
    var link=doc.createElement("link");  
    link.setAttribute("rel", "stylesheet");  
    link.setAttribute("type", "text/css");  
    link.setAttribute("href", url);  
  
    var heads = doc.getElementsByTagName("head");  
    if(heads.length)  
        heads[0].appendChild(link);  
    else  
        doc.documentElement.appendChild(link);  
}

二.动态创建style方式

但是,这样的话,需要加载整个css文件,但是那样有可能浪费一个http请求并占用一个服务器请求数,并等待上一段下载时间,所以,Firebug Lite采取的是将css代码写在js中,然后动态创建style标签的方法,正如下面所示

function addCssByStyle(cssString){  
    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方式

var script=document.createElement("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方式

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

五.打印引入js方式

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

转载于:https://www.cnblogs.com/henuyuxiang/p/6215706.html