window.getComputedStyle() 方法及应用

document.defaultView.getComputedStyle(element[,pseudo-element]);  
或者
window.getComputedStyle(element[,pseudo-element]);

先说说用法吧。这个函数是 Window 对象提供的，所以直接调用即可。第一个参数传入要获取样式的元素。返回的是计算后的样式对象，可以根据这个对象来获取计算好的样式值。

//下面就是获取计算好的背景颜色。

console.log(getComputedStyle(div).backgroundColor)

getComputedStyle 是通过 document.defaultView 对象来调用的。 大部分情况下，这是不需要的， 因为可以直接通过 window 对象调用。但有一种情况，你必需要使用 defaultView, 那是在 Firefox 3.6 上访问子框架内的样式 (iframe)。而且除了在 IE8 浏览器中 document.defaultView === window 返回的是 false 外，其他的浏览器（包括 IE9 ）返回的都是 true。所以后面直接使用 window 就好，不用在输入那么长的代码了。

和 style 的异同而不同点就是：

• element.style 读取的只是元素的内联样式，即写在元素的 style 属性上的样式；
• getComputedStyle 读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式。

element.style 既支持读也支持写，我们通过 element.style 即可改写元素的样式。getComputedStyle 仅支持读并不支持写入。我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式.

getComputedStyle会引起回流，因为它需要获取祖先节点的一些信息进行计算（譬如宽高等），所以用的时候慎用，回流会引起性能问题。

问题

假如有如下 HTML 结构：

<div class="container myColor"></div>

现在我们引入了别人的库，里面有 CSS 代码：

div.container {
  background: red;
}

而我们 CSS 代码如下：

.myColor{
  background: green;
}

.container {
  height: 100px;
  width: 100px;
}

所以上面的代码最终会是一个红色的 div，因为 UI 库里的 div.container 的优先级高于 .myColor。

现在需求是：如何只能用 JS 代码来使得这个 div 变成绿色呢？

分析

只能用 JS 改变样式那么只好用 div.style.backgroundColor = ‘green’ 来设置内联样式喽。但是不能硬编码直接写等于 green 呀，要是 .myColor 变其他颜色，我们代码又得重写。

所以现在问题变成了：如何通过 JS 代码获取带有 .myColor 类的背景色呢？

可以这么想：现在没有单纯的 .myColor 的元素，我可以创建一个呀，然后用上面的 getComputedStyle 去获取背景色。用完了再把这个元素移除就好了。

• 创建临时元素如 div
• 将要计算的类写到元素上，同时设置 display = none 使得元素不可见
• 将临时元素添加到 document.body 里
• 在一段时间后获取计算后的属性，并将其添加到内联元素上
• 最后移除元素

let tempDiv = document.createElement("div");
tempDiv.style.display = 'none';
tempDiv.className = "myColor";
document.body.appendChild(tempDiv);

setTimeout(() => {
  let myColor= getComputedStyle(tempDiv).backgroundColor;

  let div = document.querySelector(".container");
  div.style.backgroundColor = myColor;

  tempDiv.remove();
}, 100);

要注意的是这里要设置延时。为毛呢？因为你总得给定时间让别人算这个样式值吧。在将创建好的 div 添加到 document.body 里，是需要一点时间让页面去计算样式的。我这里简单测试了一下，小于 10ms 就不能获取计算后的值了，所以保险起见用 100ms 是足够的。

注意

因为这是通过js来获取，对于background-color和text-overflow这样的属性，我们需要写成驼峰式，如backgroundColor和textOverflow。而因为float在js中是保留字，所以需要写成cssFloat。

console.log(window.getComputedStyle(document.querySelector("#testEL"),null).width)

getComputedStyle会返回该元素的所有属性，无论是预定的，还是继承或默认的；而element.style只返回元素的预定义的属性。

console.log(document.querySelector("#testEL").style);