CSS进阶之getComputedStyle()

[FrankKai]

在应用css变量一键切换热力图主题色的时候，尝试查询自定义的css属性。
通过element.style获取不到属性，但是通过getComputedStyle()获取到了。

:root {
  --my-var: 24, 144, 255;
}

const element = document.documentElement;
element.style.getPropertyValue("--my-var");// 当时的场景，从行内样式中中获取不到变量
getComputedStyle(element).getPropertyValue("--my-var");// 成功获取到24,144,155

这是为什么呢？在这篇文章中我们将对getComputedStyle()一探究竟。

• 介绍
• 切记
• 语法
• 例子
• window.getComputedStyle(element)与element.style区别是什么？
• defaultView
• 通过getComputedStyle获取伪元素
• getComputedStyle使用建议

这属于CSSOM的内容，可以查阅学习全部：[译](CSSOM（CSS Object Model）介绍和指南)。

介绍

window.getComputedStyle()方法返回一个元素的CSS属性对象，但是需要在应用了一个样式表和样式表中的计算成功解析后。
通过对象的api或者索引可以获得css的属性值。

切记

Window.getComputedStyle(), which exposes the CSSStyleDeclaration object as a read-only interface.
通过Window.getComputedStyle()暴露出的是一个只读的CSSStyleDeclaration对象，只读意味着不可写，也就是说只能get，不能set。

索引获取是什么意思？

返回的对象是一个CSSStyleDeclaration对象，有以索引为key的很多属性。

...
265: "baseline-shift"
266: "dominant-baseline"
267: "text-anchor"
268: "writing-mode"
269: "vector-effect"
279: "caret-color"
280: "line-break"
...
animationTimingFunction: "ease"
backdropFilter: "none"
...

语法

var style = window.getComputedStyle(element, [,pseudoElt]);

返回值是一个live CSSStyleDeclaration对象，会随着元素的样式更新一起更新。

例子

<p>Hello</p>

p {
  font: 2rem/2 sans-serif; // font-size, line-height和 font-family，rem代表root element的font-size，16px

font: italic small-caps bold 16px/2 cursive; 代表font-style, font-variant, font-weight, font-stretch, font-size, line-height和 font-family。

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.

window.getComputedStyle(element)与element.style区别是什么？

二者返回的都是CSSStyleDeclaration对象，但是有如下的区别：

• getComputedStyle返回的对象是read-only的，建议用于查询元素的属性-包括通过<style>或者额外的样式设置的属性。
• element.style对象建议用于set属性，或者查询直接通过JavaScript增加的属性或者全局的style属性。
• getComputedStyle是计算后的属性，element.style是原始属性。

上面的区别很重要！！！
上面的区别很重要！！！
上面的区别很重要！！！

为什么说”getComputedStyle是计算后的属性，element.style是原始属性“？

<p style="color:red">hello</p>

const element = document.querySelector('p');
getComputedStyle(element).color; // "rgb(255, 0, 0)"
element.style.color; // "red"

明显可以看出，getComputedStyle(element).color是计算后的属性。

使用经验

自定义的CSS变量

• 需要通过getComputedStyle去读取。它属于额外的样式设置的属性。getComputedStyle(element).getPropertyValue("--my-var");
• 可以通过element.style.setProperty()设置自定义CSS变量。element.style.setProperty('--heat-cell-bgc', rgb);

defaultView

document.defaultView.getComputedStyle();
window.getComputedStyle();

在许多代码示例中，getComputedStyle是从document.defaultView对象中使用的。在几乎所有情况下，这都是不必要的，因为getComputedStyle也存在于窗口对象上。很可能defaultView模式是人们不想要的组合

通过getComputedStyle获取伪元素

通过getComputedStyle获取伪元素的值是一种用js获得伪元素样式的常用方法。（说是伪元素样式，其实就是为元素。）

可以获得::after,::before,::marker,::line-marker等等伪元素。

<style>
  h3::after {
    content: ' rocks!';
  }
</style>

<h3>Generated content</h3> 

<script>
  var h3 = document.querySelector('h3'); 
  var result = getComputedStyle(h3, ':after').content;

  console.log('the generated content is: ', result); // returns ' rocks!'
</script>

getComputedStyle使用建议

• 通过getComputedStyle返回的CSSStyleDeclaration对象包含的css属性是普通写法。比如border-bottom-width是border-width和border的代替，font-size是font的代替，这样使得css变量具有唯一性。
• CSS属性可以通过getPropertyValue(propName)或者obj['z-index']或obj.zIndex。
• getComputedStyle返回的是resolved values，这与css2.1中的computed values是一样的。对于width，height，或者padding，与used values又是相同的。
• 返回的值有时故意不准确。为了避免CSS历史记录泄露的安全问题，浏览器可能会谎报已访问链接的计算样式，就像用户从未访问过链接URL一样返回值。
• 对于CSS transitions ，在firefox getComputedStyle返回原始值，WebKit返回最终值。
• 在Firefox中，值为auto的属性返回使用的值，而不是值auto。因此，如果您对一个高度为30px的元素和一个高度为100px的包含块应用top:auto和bottom:0，那么Firefox对top的计算样式将返回70px，即100 30 = 70。

参考资料：https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle