以前我就是一篇博文 就給出一個(gè)好用的函數(shù)，它在我?guī)灼┪闹斜粡V泛運(yùn)用的。最近看了不少東西，于是便有了這篇博文，以梳理我學(xué)到的新東西。

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

退一步說，表現(xiàn)與結(jié)構(gòu)相分離也不止導(dǎo)入樣式表這一條路。要知道，一共有三種樣式類型，外部樣式，內(nèi)部樣式，與內(nèi)聯(lián)樣式。

• 外部樣式，就是我們上面說的那個(gè)，寫在一個(gè)獨(dú)立的CSS文件中。
• 內(nèi)部樣式，就是獨(dú)立寫在一個(gè)style標(biāo)簽中，通常是放在head標(biāo)簽中，我最后提供的函數(shù)生成的樣式就是內(nèi)部樣式。
• 內(nèi)聯(lián)樣式，就是寫在元素的style屬性中的樣式。

新添加的接口主要集中在外部樣式中——之所以說接口，因?yàn)橄鄳?yīng)的實(shí)現(xiàn)是由瀏覽器方提供的，像IE6那樣傲慢的家伙，從來無(wú)視它們的存在。

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

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

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

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

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

type有點(diǎn)類似節(jié)點(diǎn)的nodeType，對(duì)樣式規(guī)則進(jìn)行細(xì)分，它是用一個(gè)整數(shù)來表示其類型。具體情況如下

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

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

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

還有幾個(gè)生不逢時(shí)的方法：

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

我們可以弄一個(gè)設(shè)定樣式的函數(shù)出來：

var hyphenize =function(name){ 
  return name.replace( /([A-Z])/g, "-$1" ).toLowerCase();
}    
var capitalize = function(prop){ 
  return prop.replace(/\b[a-z]/g, function(match){ 
    return match.toUpperCase(); 
  });
} 
var setStyle = function(el, styles) { 
  for (var property in styles) { 
    if(!styles.hasOwnProperty(property)) continue; 
    if(el.style.setProperty) { 
      //必須是連字符風(fēng)格，el.style.setProperty('background-color','red',null); 
      el.style.setProperty(hyphenize(property),styles[property],null);       
    } else { 
      //必須是駝峰風(fēng)格，如el.style.paddingLeft = "2em" 
      el.style[camelize(property)] = styles[property] 
    } 
  } 
  return true;
}

使用方法：

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

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

最后附上我的加強(qiáng)版addSheet方法。它增添自動(dòng)處理opacity的功能，也就是說我們只需要按標(biāo)準(zhǔn)設(shè)置cssText，它會(huì)自動(dòng)生成相應(yīng)的濾鏡，這樣一來至少讓火狐等瀏覽器通過W3C的校檢。

最新評(píng)論