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);