JS函數(shù)實(shí)現(xiàn)動態(tài)添加CSS樣式表文件

更新時(shí)間：2012年12月15日 16:49:37 作者：

有時(shí)會使用一些改變心情方面的想法，比如JS函數(shù)實(shí)現(xiàn)動態(tài)添加CSS樣式表文件，這樣就可以做到隨機(jī)加載心情文件，需要的朋友可以了解下

先給出函數(shù)。

 
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"){//增加自動轉(zhuǎn)換透明度功能，用戶只需輸入W3C的透明樣式，它會自動轉(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)) 
} 
} 

　　有時(shí)我們需要在.js文件對文檔動態(tài)引入一些CSS樣式。對于一些短小的CSS代碼來說，這好辦，我們可以調(diào)用其style方法，如

復(fù)制代碼代碼如下:

 
varddd=document.getElementById("ddd"); 
ddd.style.border="1pxsolidred"; 

　　如果再長一點(diǎn)也無所謂：

復(fù)制代碼代碼如下:

 
varddd=document.getElementById("ddd"); 
ddd.style.cssText="border:1pxsolidred;color:#000;background:#444;float:left"; 

　　本人而言，我是喜歡后者。因?yàn)榍罢哂袊?yán)重的兼容問題。如float這個(gè)樣式，在IE是styleFloat，在火狐等W3C標(biāo)準(zhǔn)游覽器是cssFloat。而cssText則是通吃。
　　如果很長，我們可以動態(tài)導(dǎo)入一CSS文件。如

復(fù)制代碼代碼如下:

 
functionaddSheetFile(path){ 
varfileref=document.createElement("link") 
fileref.rel="stylesheet"; 
fileref.type="text/css"; 
fileref.href=path; 
fileref.media="screen"; 
varheadobj=document.getElementsByTagName('head')[0]; 
headobj.appendChild(fileref); 
} 

　　這個(gè)函數(shù)在IE中有點(diǎn)累贅。我向來是支持哪個(gè)游覽器就用哪個(gè)游覽器的原生函數(shù)，直接使用二進(jìn)制代碼效率最高。

復(fù)制代碼代碼如下:

varoStylesheet=document.createStyleSheet(sURL,iIndex);

　　createStyleSheet帶的兩個(gè)參數(shù)都是可選的。
　　但如果我們的樣式是某個(gè)頁面獨(dú)有的，而且只有管理員才能使用到，而且那部分頁面是動態(tài)生成的，我們需要一開始就引入它嗎？需要特意弄個(gè)文件來裝載它嗎？最好的方法讓這些樣式與動態(tài)腳本捆綁在一起。我這個(gè)函數(shù)就為此而開發(fā)的。
　　坦白說，它最開始是為富文本編輯器而開發(fā)的。大家都知道，富文本輸入框最流行的做法是把要輸入的內(nèi)容放到iframe中，這就涉及到兩種document，一個(gè)主頁面的document，另一個(gè)是iframe的document。iframe的document又涉及到兼容問題。我們可以：
variframe=document.createElement('iframe');//生成用于編輯的richtexteditor
variframeDocument=iframe.contentDocument||iframe.contentWindow.document;
……
　　嘛，扯遠(yuǎn)了?？偠灾?，函數(shù)最開始的判定就是為這兩種document而準(zhǔn)備。如果沒有涉及到iframe，我們只傳入一個(gè)參數(shù)就行了。最后一個(gè)參數(shù)永遠(yuǎn)是CSS字符串。
　　然后是動態(tài)生成styleSheet元素，把CSS字符串加入到此元素的問題。當(dāng)然如果有現(xiàn)階段的，當(dāng)然就用現(xiàn)成的。DOM元素越多對游覽器的負(fù)擔(dān)就越大。我們想到document.styleSheets方法。它返回一個(gè)集合，包含style元素與link元素，還涉及一兼容問題，如：

復(fù)制代碼代碼如下:

 
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlns="　　 
<head> 
<metahttp-equiv="content-type"content="text/html;charset=UTF-8"/> 
<%#強(qiáng)制IE8像IE7一樣呈現(xiàn)網(wǎng)頁-%> 
<metahttp-equiv=”X-UA-Compatible”content=”IE=EmulateIE7″/> 
<%#--默認(rèn)所有的鏈接都在本窗口打開-%> 
<basetarget="_self"/> 
<title><%=h(yield(:title))||controller.action_name%></title> 
<%=stylesheet_link_tag"screen","button","style"%> 
<linkrel="stylesheet"href="/stylesheets/print.css"type="text/css"media="print"> 
<!--[ifltIE8]> 
<linkrel="stylesheet"href="/stylesheets/ie.css"type="text/css"media="screen"> 
<![endif]--> 
<%=javascript_tag"window._token='#{form_authenticity_token}'"ifActionController::Base.allow_forgery_protection%> 
<%=javascript_include_tag:defaults%> 
<styletype="text/css"media="print"></style> 
</head> 

　　上面用alert(document.styleSheets.length);測試一下，IE返回6，W3C游覽器返回5。因此，否決了它。而且我們只用到style元素，不使用外聯(lián)。第二部分的判定就針對head中的style元素而言，沒有就創(chuàng)建一個(gè)。然后我們把CSS字符串加在第一個(gè)style元素就行了。
　　接著我們要加把保險(xiǎn)鎖，因?yàn)楫?dāng)media="print"時(shí)，只在頁面打印時(shí)，定義的效果才有效。為了防止第一個(gè)style元素的media值不是screen，我們得改一改。

復(fù)制代碼代碼如下:

 
varstyleElement=styleElements[0]; 
varmedia=styleElement.getAttribute("media"); 
if(media!=null&&!/screen/.test(media.toLowerCase())){ 
styleElement.setAttribute("media","screen"); 
} 

　　附上media的一些說明。
　　screen(缺省值)，提交到計(jì)算機(jī)屏幕；
　　print，輸出到打印機(jī)；
　　projection，提交到投影機(jī)；
　　aural，揚(yáng)聲器；
　　braille，提交到凸字觸覺感知設(shè)備；
　　tty，電傳打字機(jī)(使用固定的字體)；
　　tv，電視機(jī)；
　　all，所有輸出設(shè)備。
　　最后是如此添加的問題。分IE，火狐與其他游覽器三種。判定游覽器也用各自的私有屬性或方法。如styleSheet是IE獨(dú)用的，getBoxObjectFor是火狐獨(dú)用的（當(dāng)然你也可以使用(/firefox/.test(navigator.userAgent.toLowerCase())），通常DOM操作是最耗時(shí)的，能用私有就用私有！
　　使用方法。

復(fù)制代碼代碼如下:

 
addSheet(" 
.RTE_iframe{width:600px;height:300px;} 
.RTE_toolbar{width:600px;} 
.color_result{width:216px;} 
.color_view{width:110px;height:25px;} 
.color_code{text-align:center;font-weight:700;color:blue;font-size:16px;} 
div.table{width:176px;position:absolute;padding:1px;} 
div.tabletd{font-size:12px;color:red;text-align:center;} 
");*/ 
　　對比一下51js的客服果果腳本，更短小，但是它會可能會創(chuàng)建多個(gè)style元素，還有一些效率的問題……畢竟我這個(gè)最初是為開發(fā)富文本編輯而開發(fā)的，功能不強(qiáng)大不行啊！ 
/* 
動態(tài)添加樣式表的規(guī)則 
*/ 
iCSS={add:function(css){ 
varD=document,$=D.createElement('style'); 
$.setAttribute("type","text/css"); 
$.styleSheet&&($.styleSheet.cssText=css)|| 
$.appendChild(D.createTextNode(css)); 
D.getElementsByTagName('head')[0].appendChild($); 
}}; 
iCSS.add(" 
.dhoooListBox,.dhoooListBoxli{margin:0;padding:0;list-style-type:none;font-size:12px;cursor:default} 
.dhoooListBox{border:1pxsolid#aaa;width:180px;background:#eee;height:200px;overflow:auto;float:left} 
.dhoooListBoxli{margin:5px;line-height:24px;background:url(images/smilies/time.gif)no-repeat060%;padding-left:25px;color:#555;} 
.dhoooListBoxli.selected{background-color:#FFCC33} 
"); 
　　最后追加幾個(gè)相關(guān)的方法: 
vargetClass=function(ele){ 
returnele.className.replace(/s+/,'').split(''); 
}; 
varhasClass=function(ele,cls){ 
returnele.className.match(newRegExp('(\s|^)'+cls+'(\s|$)')); 
} 
varaddClass=function(ele,cls){ 
if(!this.hasClass(ele,cls))ele.className+=""+cls; 
} 
varremoveClass=function(ele,cls){ 
if(hasClass(ele,cls)){ 
varreg=newRegExp('(\s|^)'+cls+'(\s|$)'); 
ele.className=ele.className.replace(reg,''); 
} 
} 