JS動態引入js、CSS動態建立script/link/style標籤 JS動態引入js、CSS動態建立script/link/style標籤
阿新 • • 發佈：2018-12-20
JS動態引入js、CSS動態建立script/link/style標籤
轉：https://www.cnblogs.com/henuyuxiang/p/6215706.html一.動態建立link方式
我們可以使用link的方式.如下程式碼所示.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 |
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標籤的方法,正如下面所示
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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方式
| 1 2 3 4 5 6 7 8 |
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方式
| 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
>");
|
一.動態建立link方式
我們可以使用link的方式.如下程式碼所示.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 |
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標籤的方法,正如下面所示
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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方式
| 1 2 3 4 5 6 7 8 |
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方式
| 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
>");
|