Window.getComputedStyle(), which exposes the CSSStyleDeclaration object as a read-only interface.
通过Window.getComputedStyle()暴露出的是一个只读的CSSStyleDeclaration对象,只读意味着不可写,也就是说只能get,不能set。
let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
para.textContent = 'My computed font-size is ' +
compStyles.getPropertyValue('font-size') +
',\nand my computed line-height is ' +
compStyles.getPropertyValue('line-height') +
'.';
=>My computed font-size is 32px, and my computed line-height is 64px.
在应用css变量一键切换热力图主题色的时候,尝试查询自定义的css属性。 通过element.style获取不到属性,但是通过getComputedStyle()获取到了。
这是为什么呢?在这篇文章中我们将对getComputedStyle()一探究竟。
这属于CSSOM的内容,可以查阅学习全部:[译](CSSOM(CSS Object Model)介绍和指南)。
介绍
window.getComputedStyle()方法返回一个元素的CSS属性对象,但是需要在应用了一个样式表和样式表中的计算成功解析后。 通过对象的api或者索引可以获得css的属性值。
切记
索引获取是什么意思?
返回的对象是一个CSSStyleDeclaration对象,有以索引为key的很多属性。
语法
返回值是一个live CSSStyleDeclaration对象,会随着元素的样式更新一起更新。
例子
font: italic small-caps bold 16px/2 cursive;
代表font-style, font-variant, font-weight, font-stretch, font-size, line-height和 font-family。=>My computed font-size is 32px, and my computed line-height is 64px.
window.getComputedStyle(element)与element.style区别是什么?
二者返回的都是CSSStyleDeclaration对象,但是有如下的区别:
<style>
或者额外的样式设置的属性。上面的区别很重要!!! 上面的区别很重要!!! 上面的区别很重要!!!
为什么说”getComputedStyle是计算后的属性,element.style是原始属性“?
明显可以看出,getComputedStyle(element).color是计算后的属性。
使用经验
自定义的CSS变量
getComputedStyle(element).getPropertyValue("--my-var");
element.style.setProperty('--heat-cell-bgc', rgb);
defaultView
在许多代码示例中,getComputedStyle是从document.defaultView对象中使用的。在几乎所有情况下,这都是不必要的,因为getComputedStyle也存在于窗口对象上。很可能defaultView模式是人们不想要的组合
通过getComputedStyle获取伪元素
通过getComputedStyle获取伪元素的值是一种用js获得伪元素样式的常用方法。(说是伪元素样式,其实就是为元素。)
可以获得::after,::before,::marker,::line-marker等等伪元素。
getComputedStyle使用建议
参考资料:https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle