再談javascript 動態添加樣式規則 W3C校檢
2024-05-06 14:12:12
供稿：網友
毫無疑問，基于表現與結構相分離的原則，直接導入一個新的樣式表是最好的選擇，但有些情況就行不通，如我們做一個能拖動的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對象，用于設定此樣式是用于顯示器，打印機還是投影機等等)
