首页 > 代码库 > 全栈JavaScript之路( 二十五 )訪问元素的样式

全栈JavaScript之路( 二十五 )訪问元素的样式

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

  在style特性中。提定的不论什么css属性,都将表现为这个style 对象的属性。对于使用短划线的的属性名。必须转化为驼峰大写和小写形式,多数情况下都能够这样转换。

也有例外, float 是javascript keyword,不能直接转换,在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之路( 二十五 )訪问元素的样式