再談javascript 動態(tài)添加樣式規(guī)則 W3C校檢

更新時間：2009年12月25日 02:52:31 作者：

Ruby's Louvre blog都是一些精品內容，下面這個是介紹javascript 動態(tài)添加樣式規(guī)則，而且最后的函數，可以讓你的css通過w3c的驗證。

毫無疑問，基于表現與結構相分離的原則，直接導入一個新的樣式表是最好的選擇，但有些情況就行不通，如我們做一個能拖動的DIV，從設置樣式的角度看，就是把它絕對定位，以防影響原來的文檔流，然后一點點改變其top與left的值實現移動的效果。由于拖動是有時間概念的，一秒24幀，樣式表不可能面面俱到都把它們寫進去。因此動態(tài)生成樣式規(guī)則與快速修改樣式規(guī)則是非常有必要的，W3C為此做了大量的工作，在DOM2.0中，擴充了不少接口。

退一步說，表現與結構相分離也不止導入樣式表這一條路。要知道，一共有三種樣式類型，外部樣式，內部樣式，與內聯樣式。

* 外部樣式，就是我們上面說的那個，寫在一個獨立的CSS文件中。
* 內部樣式，就是獨立寫在一個style標簽中，通常是放在head標簽中，我最后提供的函數生成的樣式就是內部樣式。
* 內聯樣式，就是寫在元素的style屬性中的樣式。

新添加的接口主要集中在外部樣式中——之所以說接口，因為相應的實現是由瀏覽器方提供的，像IE6那樣傲慢的家伙，從來無視它們的存在。

在W3C的模型中，type為"text/css"的link標簽與style標簽都是代表一個CSSStyleSheet對象，我們可以通過 document.styleSheets 獲得當前頁面中所有的CSSStyleSheet對象，不過這是一個集合，非單純的數組。每一個CSSStyleSheet對象擁有如下屬性，

* type：永遠返回“text/css”字符串。
* disabled：和input的disabled的作用相同，默認是false。
* href：返回URL，如果是style標簽為null。
* title：返回其title的值，title與普通元素的title無異，隨你寫什么。
* media：IE與火狐返回的東西并不一致，不太好說。media是用來規(guī)定它擁有的樣式規(guī)則對什么設備有效，默認是所有。
* ownerRule：返回一個只讀的CSSRule對象，如果樣式表是用@import引入的話。
* cssRules：返回一個只讀的樣式規(guī)則對象（CSSStyleRule object）的集合。

樣式規(guī)則對象(CSSStyleRule object)，是W3C為了對樣式進行更細致的設定而搞出來的，如下面這個東西就是對應一個樣式規(guī)則對象:

復制代碼代碼如下:

 
button[type] { 
padding:4px 10px 4px 7px; 
line-height:17px; 
} 

樣式規(guī)則對象擁有如下幾個主要屬性：type,cssText,parentStyleSheet，parentRule。

type有點類似節(jié)點的nodeType，對樣式規(guī)則進行細分，它是用一個整數來表示其類型。具體情況如下

* 0: CSSRule.UNKNOWN_RULE
* 1: CSSRule.STYLE_RULE (定義一個CSSStyleRule對象)
* 2: CSSRule.CHARSET_RULE (定義一個CSSCharsetRule對象，用于設定當前樣式表的字符集，默認與當前網頁相同)
* 3: CSSRule.IMPORT_RULE (定義一個CSSImportRule對象，就是用@import引入其他的樣式表)
* 4: CSSRule.MEDIA_RULE (定義一個CSSMediaRule對象，用于設定此樣式是用于顯示器，打印機還是投影機等等)
* 5: CSSRule.FONT_FACE_RULE (定義一個CSSFontFaceRule對象，CSS3的@font-face)
* 6: CSSRule.PAGE_RULE (定義一個CSSPageRule對象)

cssText不用多說，一個非常有用的屬性，直接把字符串轉換成樣式規(guī)則，無視各瀏覽器樣式屬性的差異，如cssFloat 和styleFloat。

parentStyleSheet和parentRule都是針對@import來說的。不過，@import在IE下有問題，我基本不用它。

還有幾個生不逢時的方法：

* nsertRule(rule,index): 添加一條樣式規(guī)則。
* deleteRule(index): 移除一條樣式規(guī)則。
* getPropertyValue(propertyName) 獲取元素相應樣式屬性的值。如我們獲得一個樣式規(guī)則對象，可以利用CSSStyleRuleObject. getPropertyValue("color")獲得其字體顏色的設置。與普通的el.style.color的方法相比，其效率相當高，因為 el.style.color獲取的是內聯樣式，像IE那樣的怪胎，如果你的元素沒有設置style屬性，根本無法得到準備的值，可能為空，可能是 inhert……可能還有兼容問題，而且這內聯屬性不一定是最終應用于元素的樣式，IE只有調用不那么廢物的 el.currentStyle[prop]，其他瀏覽器就調用相當爭氣但有點麻煩的document. defaultView. getComputedStyle(el, "")[prop]。
* removeProperty(propertyName) 移除元素相應樣式屬性。
* setProperty(propertyName,value,priority)設定元素添加一個樣式，還能指定優(yōu)先級。

我們可以弄一個設定樣式的函數出來：

復制代碼代碼如下:

 
var hyphenize =function(name){ 
return name.replace( /([A-Z])/g, "-$1" ).toLowerCase(); 
} 

var camelize = function(name){ 
return name.replace(/\-(\w)/g, function(all, letter){ 
return letter.toUpperCase(); 
}); 
} 
var setStyle = function(el, styles) { 
for (var property in styles) { 
if(!styles.hasOwnProperty(property)) continue; 
if(el.style.setProperty) { 
//必須是連字符風格，el.style.setProperty('background-color','red',null); 
el.style.setProperty(hyphenize(property),styles[property],null); 
} else { 
//必須是駝峰風格，如el.style.paddingLeft = "2em" 
el.style[camelize(property)] = styles[property] 
} 
} 
return true; 
} 

使用方法：

復制代碼代碼如下:

 
setStyle(div,{ 
'left':0, 
'top':0, 
'line-height':'2em', 
'padding-right':'4px' 
}); 

不過我非常不喜歡這方法，生成的是內聯樣式，它還得特殊處理float與opacity。在IE7的內聯樣式中，濾鏡還有一個Bug，一定要讓其得到hasLayout，要不濾鏡就不會生效(我們可以通過el.currentStyle.hasLayout查看其狀況)。因此，如其一個個設置，不如用cssText一網打盡。

最后附上我的加強版addSheet方法。它增添自動處理opacity的功能，也就是說我們只需要按標準設置cssText，它會自動生成相應的濾鏡，這樣一來至少讓火狐等瀏覽器通過W3C的校檢。

復制代碼代碼如下:

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