window方法：getComputedStyle()

矫情吗；* 2021-06-26 16:06 350阅读 0赞

## `getComputedStyle()`方法 ##

该`window.getComputedStyle()`方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后，报告元素的所有`CSS`属性的值。单个`CSS`属性值通过对象提供的`API`或通过使用`CSS`属性名称进行索引来访问。

**`getComputedStyle()`方法语法**

var style = window.getComputedStyle（element [，pseudoElt ]）;

*  `element`  
    要获取其计算风格的`Element`。
 *  `pseudoElt`（可选的）  
    指定要匹配的伪元素的字符串。必须省略（或`null`）常规元素。

注意：在`Gecko 2.0（Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1）`之前，需要参数`pseudoElt`。如果为`null`，则不需要指定此参数的其他主要浏览器。`Gecko`已被更改为与其他浏览器的行为相匹配。

返回的style是一个活动`CSSStyleDeclaration`对象，它在元素的样式更改时自动更新。

## `getComputedStyle()`方法示例 ##

var elem1 = document.getElementById("elemId");
    var style = window.getComputedStyle(elem1, null);
    
    // this is equivalent to:
    // var style = document.defaultView.getComputedStyle(elem1, null);

**说明**

返回的对象与从元素`style`属性返回的`CSSStyleDeclaration`对象的类型相同；但是，这两个对象有不同的用途。从`getComputedStyle`返回的对象是只读的，可用于检查元素的样式（包括由`<style>`元素或外部样式表设置的样式）。该`elt.style`对象应该用于设置特定元素的样式。

第一个参数必须是一个`Element`（传递非元素节点，如`#text`节点，将引发错误）。从`Gecko 1.9.2（Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0）`开始，返回的`URL`值现在在`url`周围有引号，如下所示：`url("http://foo.com/bar.jpg")`。

**defaultView**

在线的许多代码示例中，`getComputedStyle`都是从`document.defaultView`对象中使用的。几乎在所有情况下，这都是不必要的，就像`getComputedStyle`在`window`对象上一样。`defaultView`模式可能是：（1）不想为`window`编写规范；（2）创建一个在Java中也可用的API的组合。然而，有一种情况必须使用`defaultView`的方法：当使用`Firefox 3.6`来访问镜框样式时。

**与伪元素一起使用**

`getComputedStyle`可以从伪元素中提取样式信息（例如：`::after, ::before, ::marker, ::line-marker`）。

## 注意 ##

返回的`CSSStyleDeclaration`对象将包含所有受支持的`CSS`属性`longhand`名称的活动值。示例`longhand`名称是`border-bottom-width`，而`border-width`和`border`是示例`shorthand`属性名称。最安全的方法是只使用`font-size`之类的`longhand`名称来查询值。使用`shorthand`名称查询（例如`font`）将无法与大多数浏览器一起使用。

可以使用`getPropertyValue(propName)`API或通过直接索引到对象（例如，`cs[' z-index']`或`cs.zIndex`。）来访问CSS属性值

`getComputedStyle`返回的值称为`resolved values`（已解析值）。这些通常与CSS 2.1 `computed values`（计算值）相同，但对于某些较旧的属性：`width、height`或者`padding`，它们是`used values`。最初，CSS 2.0将计算值定义为级联和继承后属性的“随时可用”的最终值，但CSS 2.1将计算值重新定义为预布局，并将值用作后置布局。对于CSS 2.0属性，该`getComputedStyle`函数返回计算值的旧含义，现在称为已使用的值（`used values`）。预布局值和后布局值之间的差异示例包括表示元素宽度或高度的百分比（也称为布局）的分辨率，因为只有在使用值的情况下，这些百分比才会被其等效像素所取代。

在某些已知的情况下，返回的值明显不准确。特别地，为了避免所谓的CSS历史泄漏安全性问题，浏览器可以明确地“谎报”关于链接的使用值，并且始终返回值，就像用户从未访问过链接的站点一样。大多数其他现代浏览器对伪选择器样式的应用和`getComputedStyle`返回的值的应用程序进行了类似的更改。

在CSS转换期间，`getComputedStyle`返回Firefox中的原始属性值，但返回`WebKit`中的最终属性值。

在`Firefox`中，具有该`auto`值的属性将返回已使用的值，而不是值`auto`。所以，如果你在一个包含`height:30px`并且它的包含块是`height:100px;`的元素中申请`top:auto;`和`bottom:0;`，则在请求`top`的计算样式时，Firefox将返回`top:70px`，因为`100px-30px=70px`。