JS動態引入js,CSS——動態建立script/link/style標籤

一.動態建立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>");