網(wǎng)頁(yè)中動(dòng)態(tài)加載 CSS 的四種不同方法

第一種添加方式：

document.getElementById("elementId").style.background="#ff0000";

這種方式采用內(nèi)聯(lián)是插入css.優(yōu)先級(jí)高。容易引起頁(yè)面回流性能不好 也不能進(jìn)行多個(gè)樣式的添加

第二種方式：

document.getElementsByTagName("a")[0].style.cssText="background:#ff0000;border:1px#dfdfdfsolid;";

第三種是：直接在style標(biāo)簽中寫(xiě)，這種方法要考慮不同瀏覽器的兼容性問(wèn)題。（聲明：下面代碼引用”司徒正美“的一段代碼）

varaddSheet=function(){
vardoc,cssCode;
if(arguments.length==1){
doc=document;
cssCode=arguments[0]
}elseif(arguments.length==2){
doc=arguments[0];
cssCode=arguments[1];
}else{
alert("addSheet函數(shù)最多接受兩個(gè)參數(shù)!");
}
if(!+"v1"){//增加自動(dòng)轉(zhuǎn)換透明度功能，用戶(hù)只需輸入W3C的透明樣式，它會(huì)自動(dòng)轉(zhuǎn)換成IE的透明濾鏡
vart=cssCode.match(/opacity:(d?.d+);/);
if(t!=null){
cssCode=cssCode.replace(t[0],"filter:alpha(opacity="+parseFloat(t[1])*100+")")
}
}
cssCode=cssCode+"";//增加末尾的換行符，方便在firebug下的查看。
varheadElement=doc.getElementsByTagName("head")[0];
varstyleElements=headElement.getElementsByTagName("style");
if(styleElements.length==0){//如果不存在style元素則創(chuàng)建
if(doc.createStyleSheet){//ie
doc.createStyleSheet();
}else{
vartempStyleElement=doc.createElement('style');//w3c
tempStyleElement.setAttribute("type","text/css");
headElement.appendChild(tempStyleElement);
}
}
varstyleElement=styleElements[0];
varmedia=styleElement.getAttribute("media");
if(media!=null&&!/screen/.test(media.toLowerCase())){
styleElement.setAttribute("media","screen");
}
if(styleElement.styleSheet){//ie
styleElement.styleSheet.cssText+=cssCode;
}elseif(doc.getBoxObjectFor){
styleElement.innerHTML+=cssCode;//火狐支持直接innerHTML添加樣式表字串
}else{
styleElement.appendChild(doc.createTextNode(cssCode))
}
}

4.動(dòng)態(tài)加載css文件，這個(gè)就簡(jiǎn)單了

functionaddStyle(stylePath){
varcontainer=document.getElementsByTagName("head")[0];
varaddStyle=document.createElement("link");
addStyle.rel="stylesheet";
addStyle.type="text/css";
addStyle.media="screen";
addStyle.href=stylePath;
container.appendChild(addStyle);
}
addStyle('css/add.css');

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)