再談動態新增樣式規則

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

毫無疑問，基於表現與結構相分離的原則，直接導入一個新的樣式表是最好的選擇，但有些情況就行不通，如我們做一個能拖動的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下有問題，我基本上不用它。