以前我就是一篇博文 就給出一個好用的函數，它在我幾篇博文中被廣泛運用的。最近看了不少東西，于是便有了這篇博文，以梳理我學到的新東西。

毫無疑問，基于表現與結構相分離的原則，直接導入一個新的樣式表是最好的選擇，但有些情況就行不通，如我們做一個能拖動的div，從設置樣式的角度看，就是把它絕對定位，以防影響原來的文檔流，然后一點點改變其top與left的值實現移動的效果。由于拖動是有時間概念的，一秒24幀，樣式表不可能面面俱到都把它們寫進去。因此動態生成樣式規則與快速修改樣式規則是非常有必要的，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是用來規定它擁有的樣式規則對什么設備有效，默認是所有。
• ownerrule：返回一個只讀的cssrule對象，如果樣式表是用@import引入的話。
• cssrules： 返回一個只讀的樣式規則對象（cssstylerule object）的集合。

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

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

樣式規則對象擁有如下幾個主要屬性：type,csstext,parentstylesheet，parentrule。

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

• 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不用多說，一個非常有用的屬性，直接把字符串轉換成樣式規則，無視各瀏覽器樣式屬性的差異，如cssfloat 和stylefloat。

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

|||

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

• nsertrule(rule,index): 添加一條樣式規則。
• deleterule(index): 移除一條樣式規則。
• getpropertyvalue(propertyname) 獲取元素相應樣式屬性的值。如我們獲得一個樣式規則對象，可以利用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)設定元素添加一個樣式，還能指定優先級。

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

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) { 
      //必須是連字符風格，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的校檢。

原文：http://www.cnblogs.com/rubylouvre/archive/2009/08/30/1556869.html