借鉴;https://blog.csdn.net/songylwq/article/details/8505890
https://blog.csdn.net/xiangxiangw29/article/details/52460563
https://blog.csdn.net/qq_22855325/article/details/70926881
//动态添加link标签
function createLink(cssURL,lnkId,charset,media){
var linkFirst = document.getElementsByTagName('link')[0],
linkTag = null;
if(!cssURL){
return false;
}
linkTag = document.createElement('link');
linkTag.setAttribute('id',(lnkId || 'dynamic-style'));
linkTag.setAttribute('rel','stylesheet');
linkTag.setAttribute('charset',(charset || 'utf-8'));
linkTag.setAttribute('media',(media||'all'));
linkTag.setAttribute('type','text/css');
linkTag.href = cssURL;
linkFirst.before(linkTag); //在第一个link的前面追加
}
//动态向所有页面添加模态框
function addModel(){
var cssURL1 = '../../public/static/css/weui.min.css';
var cssURL2 = '../../public/static/css/jquery-weui.css';
//注意顺序
createLink(cssURL2,'lnkId2')
createLink(cssURL1,'lnkId1')
//添加需要的script
document.write("<script language='javascript' src='../../public/static/js/jquery-1.11.2.min.js'></script>");
document.write("<script language='javascript' src='../../public/static/js/jquery-weui.js'></script>");
var maxModel = document.createElement("div");
maxModel.style.cssText='position:fixed;width:100%;height:100%;top:0;bottom:0;left:0;right:0;z-index:2000;background:rgba(255,255,255,0);';
//为这个节点添加点击时间
maxModel.addEventListener("click",function(){
$.confirm("您确定要下载App吗?", "确定下载?", function() {
$.toast("app已经下载!");
}, function() {
//取消操作
});
},false);
document.body.append(maxModel)
}
window.onload=addModel();
一.动态创建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下却不行
document.write("<link rel=\"stylesheet\" href=\"uild/style.css\" type=\"text/css\" media=\"screen\"/>");
document.write("<script type=\"text/javascript\" src=\"JustWalking.js\"></script>");