js如何动态引用外部css与js文件

发布时间:2020-03-10编辑:脚本学堂
本文介绍了js动态调用外部css与js文件的方法,动态调用css或js文件,可以实现个性化的网页效果,需要的朋友参考下。

动态调用css或js文件,可以实现个性化的网页效果,例如:
1)、每点一个模板时,将选择的模板存放在数据库中,然后页面刷新以重新加载;页面读取数据库中记录以加载相应的css,js;
但代价颇大;因为每点一次都要刷新,用户体验不好,而且每点一次都要进行数据库操作;
2)、点后在JS函数中对页面进行相应的css,js 引用,以改变风格;用户取消预览只需去掉就可;
 
js动态引用css,js文件方法:
因为html中引用外部css,js文件均在<head></head>中添加:
 

<link href="**.css" type="text/css" rel="stylesheet"></link>
或:<script type="text/javascript" src="**.js"></script>
 

动态加载,只不过是通过js创建相应的标签,然后将标签绑定到head下;
 

复制代码 代码示例:
function loadExtentFile(filePath, fileType){
    if(fileType == "js"){
        var oJs = document.create_rElement('script');       
        oJs.setAttribute("type","text/javascript");
        oJs.setAttribute("src", filename);//文件的地址 ,可为绝对及相对路径
        document.getElementsByTagName_r("head")[0].appendChild(oJs);//绑定
    }else if(fileType == "css"){
        var oCss = document.create_rElement("link");
        oCss.setAttribute("rel", "stylesheet");
        oCss.setAttribute("type", "text/css"); 
        oCss.setAttribute("href", filename);
        document.getElementsByTagName_r("head")[0].appendChild(oCss);//绑定
    }
}
loadExtentFile("js/func.js", "js");
loadExtentFile("default.css", "css");

清空:
 

复制代码 代码示例:
var lists = document.getElementsByTagName_r("link");
for ( var i = 0; i < lists.length; i++) {
if (lists[i].getAttribute("href").indexOf(".css") != -1) == -1) {
lists[i].parentNode.removeChild(lists[i]);
}
}
 

以上可以加入自己的判断,例如只想去掉temp.css,则可以判断href中是否包括temp.css等,js 判断方法与上面类似。