style currentStyle getComputedStyle

style currentStyle getComputedStyle 傻傻分不清楚,本文试图对三者做一个详细区分对比,帮助理解记忆。

还得从引入样式说起

为一个 HTML 元素引入 CSS 样式有如下三种方式:

  • 内嵌样式: 即样式直接写在 HTML 元素的标签内的 style 属性中
  • 内部样式: 即样式写在 HTML 文件中的 <style> </style> 标签内
  • 外部样式表: 即样式写在外部的 .css 文件中,然后通过一定方式引入到相应的 HTML 文件中

获取内嵌样式

对应三种样式引入方式,我们获取样式时也有三种方式:我们通常所使用的

document.getElementById('#id').style

是用来直接获取元素标签内 style 属性的内容的。

虽然 style 对象能够提供支持 style 特性的任何元素的样式信息,但它不包括那些从其他样式表层叠而来并影响到当前元素的样式信息。

获取计算样式:getComputedStyle

要说起这个方法还得从 DOM2级 说起:

“DOM2级视图”模块增加了一个名为 defaultView 的属性,其中保存着一个指针,指向拥有给定文档的窗口或框架。除此之外,“视图”规范并没有提供什么时候其他视图可用的信息。因而这是唯一一个新增的属性,除 IE 之外的所有浏览器都支持 defaultView 属性。在 IE 中有一个等价的属性名叫 parentWindow(Opera也支持这个属性)。因此,要确定文档窗口,可使用以下代码:

1
var parentWindow = document.defaultView || document.parentWindow;

“DOM2级样式” 增强了 document.defaultView,提供了 getComputedStyle 方法,这个方法接受两个参数:

  • 要取得计算样式的元素

  • 一个伪元素字符串

如果不需要伪元素信息,那么第二个参数可以是 nullgetComputedStyle 方法返回一个 CSSStyleDeclaration 对象(与 style 属性的类型相似),其中包含当前元素的所有计算样式。

下面解释一下什么叫做计算样式。

前面说过,某个元素的 CSS 样式可以有三种方式指定,而 CSS 样式的规则是层叠的,也就是说,对于通过各种途径为元素指定的 CSS 样式(包括浏览器默认样式),浏览器会在渲染显示元素之前计算它们得出一个 CSS 属性值集合,这个浏览器用于显示该元素的 CSS 属性值集合就被称为 计算样式

注意: 无论在哪个浏览器中,“计算样式” 都是只读的,不能修改计算后样式对象中 CSS 属性。也就是说 getComputedStyle 方法只能用来获取元素的样式,并不能用于修改元素的样式。

那么,currentStyle什么鬼?

说之前,我们先诅咒一下啊万恶的 IE。IE 是不支持 ”DOM2级样式“ 中的 getComputedStyle 方法的,但它有一种类似的概念。

在 IE 中,每个具有 style 属性的元素还有一个 currentStyle 属性。这个属性是 CSSStyleDeclaration 的实例,包含当前元素全部都计算后的样式。