JS函數實作動態新增CSS樣式表檔_基礎知識-js教程-PHP中文網

先給出函數。

 
varaddSheet=function(){ 
"{ ; 
if(arguments.length==1){ 
doc=document; 
cssCode=arguments[0] 
}elseif(arguments.length==2){ 
doc=arguments [0]; 
cssCode=arguments[1]; 
}else{ 
alert("addSheet函數最多接受兩個參數!"); 
} 
if(! "v1" ){//增加自動轉換透明度功能，使用者只需輸入W3C的透明樣式，它會自動轉換成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元素則建立
if(doc.createStyleSheet){//ie 
doc.createStyleSheet(); 
}else{ 
vartempStyleElement=doc.createElement('style');//w3c 
tempStyleElement.setAttribute("type","text/css"); 
headElement.appendChild(tempStyleElement); 
} 
} 
varstyleElement=styleElements[0]; varmedia= .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)) 
} 
} 

 有時我們需要在.js文件對文檔動態引入一些CSS樣式。對於一些短小的CSS程式碼來說，這好辦，我們可以呼叫其style方法，如

複製程式碼程式碼如下:

varddd=document.getElementById("ddd");

ddd.style.border="1pxsolidred"; 

　　　　　如果再長一點也所謂：所謂

複製程式碼程式碼如下:

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

 
　　本人而言，我喜歡後者。因為前者有嚴重的兼容問題。如float這個樣式，在IE是styleFloat，在火狐等W3C標準遊覽器是cssFloat。而cssText則是通吃。 
　　如果很長，我們可以動態匯入一CSS檔案。如

複製程式碼程式碼如下: functionaddSheetFile(path(path){ .createElement("link")

fileref.rel="stylesheet";

fileref.type="text/css"; 
fileref.href=path; 
fileref.media="screen" ; 
varheadobj=document.getElementsByTagName('head')[0]; 
headobj.appendChild(fileref); 
} 

 
　　這個函數在這個函數在這個函數中有點累蓴。我向來是支援哪個遊覽器就用哪個遊覽器的原生函數，直接使用二進位程式碼效率最高。 

複製程式碼

程式碼如下: varoStylesheet=document.createStyledef. 🎜>
　　createStyleSheet帶的兩個參數都是可選的。
　　但如果我們的樣式是某個頁面獨有的，而且只有管理員才能使用到，而且那部分頁面是動態生成的，我們需要一開始就引入它嗎？需要特意弄個文件來裝載它嗎？最好的方法讓這些樣式與動態腳本捆綁在一起。我這個函數就為此而開發的。
　　坦白說，它最開始是為富文本編輯器而開發的。大家都知道，富文本輸入框最流行的做法是把要輸入的內容放到iframe中，這就牽涉到兩種document，一個主頁的document，另一個是iframe的document。 iframe的document又涉及相容問題。我們可以：
variframe=document.createElement('iframe');//產生用於編輯的richtexteditor
variframeDocument=iframe.contentDocument||iframe.contentWindow.document; ，扯遠了。總而言之，函數最開始的判定就是為這兩種document而準備。如果沒有牽涉到iframe，我們只傳入一個參數就行了。最後一個參數永遠是CSS字串。
　　然後是動態產生styleSheet元素，把CSS字串加入到此元素的問題。當然如果有現階段的，當然就用現成的。 DOM元素越多對遊覽器的負擔就越大。我們想到document.styleSheets方法。它傳回一個集合，包含style元素與link元素，也涉及一相容問題，如：

複製程式碼程式碼如下:

-//W3C//DTDXHTML1.0Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
 
　　上面用alert(document.styleSheets.length);測試一下，IE回傳6，W3C遊覽器回傳5。因此，否決了它。而且我們只用到style元素，不使用外聯。第二部分的判定就針對head中的style元素而言，沒有就創造一個。然後我們把CSS字串加在第一個style元素就行了。

　　接著我們要加把保險鎖，因為當media="print"時，只在頁面列印時，定義的效果才有效。為了防止第一個style元素的media值不是screen，我們得改一改。

複製程式碼程式碼如下:

varstyleElement=styleElements[0]; styleElement.getAttribute("media");

if(media!=null&&!/screen/.test(media.toLowerCase())){ 
styleElement.setAttribute("media","screen"); 
} 

 
　　附上media的一些說明。 
　　screen(缺省值)，提交到電腦螢幕；

　　print，輸出到印表機；
　　projection，提交給投影機；
　　aural，揚聲器　　tty，電傳打字機(使用固定的字體)；
　　tv，電視機；
　　all，所有輸出設備。
　　最後是如此添加的問題。分IE，火狐與其他遊覽器三種。判定遊覽器也用各自的私有屬性或方法。如styleSheet是IE獨用的，getBoxObjectFor是火狐獨用的（當然你也可以使用(/firefox/.test(navigator.userAgent.toLowerCase())），通常DOM操作是最耗時的，能用私有就用私有！

 
addSheet(" 
.RTE_iframe{width:600px;height:300px;} 
.RTE_toolbar{width:600px;} 
.color_result{width 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的客服果果腳本，更短小，但是它會可能會創建多個style元素，還有一些效率的問題……畢竟我這個最初是為開發富文本編輯而開發的，功能不強大不行啊！ 
/* 
動態加入樣式表的規則
*/ 
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:auto;float:auto;float:auto;float:auto;float:auto;float:auto;float:auto;float:auto;float:auto;float:auto;float:auto;float:auto;float:auto;float: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} 
"); 
　　最後追加幾個相關的方法: 
vargetClass=function(ele){ 
returnele.className.replace(/sName.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,''); 
} 
} 