2015-03-12——简析DOM2级样式

CSSStyleSheet对象  表示某种类型的样式表
CSSStyleRule对象  样式表中的每条规则

获得文档中的所有样式表
document.styleSheets

CSSStyleSheet对象
属性
type  text/css
disabled  表示样式表是否应用于当前文档。应用/禁用，false/true
href  样式表相对于当前文档所在的URL
title  可以用来分组样式表的标签
media  表示目标设备类型，screen或print  下一级属性，w3c  mediaText  IE  无
ownerRule  一个只读的CSSRule对象，表示其父规则
cssRules  一个只读的CSSRuleList列表对象，包含样式表中所有CSSRule对象  IE中为rules
方法
insertRule(rule, index);  IE  addRule(selector, declaration, index);
deleteRule(index);
没有专门用于编辑的方法，只能通过修改rules[i]的style属性直接更改。相比于直接修改element的style属性，其可以实现继承。

CSSStyleRule对象
type  继承自CSSRule对象的一个属性，已0-6表示其规则类型。对于CSSStyleRule类型的规则而言，该属性值始终为1。
cssText  表示当前状态下的全部规则。如果被js修改了，该字符串也会相应改变。
parentStyleSheet  引用父CSSStyleSheet对象。
parentRule  如@media
selectorText  规则的选择符
style  与HTMLElement.style类似，是CSSStyleDeclaration对象一个实例。

CSSStyleDeclaration对象
cssText  以字符串形式表示全部规则。
parentRule  引用CSSStyleRule对象
getPropertyValue(porpertyName);
removeProperty(propertyName);
setProperty(propertyName, value, priority);  IE不支持，只能直接通过style，以快捷的方式访问。
还有一个通过CSS2Properties访问CSSStyleDeclaration对象实例（例如HTMLElement的style属性）的快捷方法。

style属性
通过style属性只能访问到元素style属性中已嵌入的方式声明的CSS属性。style属性无法访问由多重样式表层叠而来或从父元素继承而来的任何CSS属性。

基于className切换样式
className引用的是HTMLElement对象的class属性。
为什么不用setAttribute设置class属性？
W3C  element.setAttribute('class', 'name');
IE  element.setAttribute('className', 'name');

切换样式表
1、可以使用<link>元素的rel属性定义备用的样式表
2、给body标签应用一个类名
3、添加或移除样式表

<link>元素的属性
type
href
media
rel  "stylesheet"立即应用  "alternate stylesheet"备用，可以用来控制样式表的启用与否
disabled  是否禁用
title  样式表的标题，可用来组合多个样式表。

样式表所属节点
W3C  styleSheet.ownerNode
IE  styleSheet.owningElement

修改CSS规则
只能通过修改rules[i]的style属性，直接更改，没有专用的方法。相比于直接修改element的style属性，其可以实现继承。

增加css规则
DOM2
index = length是列表末尾
stylesheets[i].insertRule(rule, index);
IE
index = -1是列表末尾
stylesheets[i].addRule(selector, declaration, index);

DOM2 规范中可以使用伪类
a[href]:after {
    content: '(' attr(href) ')';
    font-size: 40%;
}

访问计算样式
DOM2样式规范中，在document.defaultView中包含了一个叫getComputedStyle()的方法，返回一个只读的CSSStyleDeclaration对象。其中包含了，所有的计算样式。
document.defaultView.getComputedStyle(element, null);  //第二个参数，伪类
IE中使用 element.currentStyle[propertyName]