全栈JavaScript之路（ 二十五 ）访问元素的样式

标签：css   dom   

任何支持style 特性的元素在 ，在其DOM  节点 对象中都有一个 style 属性与之对应。 这个style 对象是 CSSStyleDeclaration类型的实例，包含着html style特性的所有样式信息。但不包含 外部样式或者 内嵌样式层叠而来的样式。

  在style特性中，提定的任何css属性，都将表现为这个style 对象的属性。对于使用短划线的的属性名，必须转化为驼峰大小写形式，多数情况下都可以这样转换。

也有例外， float 是javascript 关键字，不能直接转换，在ie中 转换为 styleFloat,在其它浏览器中，转换为 cssFloat.

如果元素没有设置style属于，哪么style会有一些默认的属性。

1. dom2 来style对象定义了一些属性与方法

1. cssText: 通过它可以访问style特性中的代码
2. length: 应用给元素的CSS属性的数量
3. parentRule: 表示CSS信息的CSSRule 对象
4. getPropertyValue(propertyName): 返回 指定属性的值。
5. getPropertyCSSvalue(propertyName):返回包含 给点属性值的 CSSValue 对象。（{cssValueType:‘‘,cssText:""}）
6. getPropertyPriority(propertyName): 如果给点的属生使用了 !mportant,则返回 importtant 如果没有，则返回 空字符串。
7. item(index),返回指定位置的CSS属性的名称
8. removeProperty(propertyName);从样式中删除给点属性
9. setProperty(propentyName,value,priority),将给定属性设为指定的值，并加上优先权(空字串或者 !important)

2. 计算样式: “DOM2 级样式”增强了document.defaultView，提供了 getComputedStyle()方法。

这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如":after"）。

如果不需要伪元素信息，第二个参数可以是null。getComputedStyle()方法返回一个CSSStyleDeclaration 对象（与style 属性的类型相同），其中包含当前元素的所有计算的样式。 (IE 中 没有 getComputedStyle()方法，但是在IE中，每个有style属性的元素 都有一个   currentStyle 属性， 它是CSSStyleDeclaration 类型的实例)

边框属性可能会也可能不会返回样式表中实际的border 规则（Opera 会返回，但其他浏览器不会）。

存在这个差别的原因是不同浏览器解释综合（rollup）属性（如border）的方式不同，

因为设置这种属性实际上会涉及很多其他属性。在设置border 时， 实际上是设置了四个边的边框宽度、颜色、样式属性（ border-left-width 、border-top-color 、border-bottom-style ， 等等）。

因此， 即使computedStyle.border 不会在所有浏览器中都返回值，但computedStyle.borderLeftWidth 会返回值。

全栈JavaScript之路（ 二十五 ）访问元素的样式,布布扣,bubuko.com

全栈JavaScript之路（ 二十五 ）访问元素的样式

标签：css   dom   

原文地址：http://blog.csdn.net/liveinjs/article/details/37698587