DOM2 Style 学习总结

DOM2 Style 也叫DOM2 CSS，是W3C DOM2级规范的成员。

提供了访问和操作所有与CSS相关的样式及规则的能力。

 

CSSStyleSheet对象

通过 document.styleSheets 访问到CSSStyleSheet的集合。其中每一个元素是一个CSSStyleSheet，就是从样式文件引入或用<style type="text/css"></style>定义的一个样式列表。

 

属性disabled : true or false ,该样式是否可用。

属性cssRules : 所有样式的列表，在ie中要用rules（比较简单，但是另搞一套，明显是给程序员找麻烦，鄙视！） 

           useage : document.styleSheets[0].cssRules[0].selectorText

 

CSSStyleRule对象

上面的cssRules 取到的就是CSSStyleRule对象的集合，每一个CSSStyleRule对象就是一条css样式。

 

cssText属性：以字符串形式表示了当前状态的全部规则（ie不支持）。

           useage : document.styleSheets[0].cssRules[0].cssText

selectorText 属性: 规则的选择符。（.className）

style属性 ： 与HTMLElement.style取得的对象类似，取得了一个CSSStyleDeclaration对象的引用。

 

 

CSSStyleDeclaration对象

上面style属性取到的就是一个CSSStyleDeclaration对象，包含了一条样式的所有样式属性。

 

cssText属性：以字符串形式表示了当前状态的全部规则（ie说：“这个可以支持！”）。

           useage : document.styleSheets[0].cssRules[0].style.cssText

下面三个ie都不支持，

getPropertyValue(propertyName) 方法

removeProperty(propertyName) 方法

setProperty(propertyName,value,priority) 方法

 

 

以上是DOM2 Style的主要对象，实际上常用的方式是HTMLElement.style.styleName 来修改和访问属性，认识了上面的对象我认为更有利于整体把握CSS样式的使用。