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、添加或移除样式表

样式表所属节点
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]

巴特西

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

最新文章

热门文章