JS之DOM篇-查询计算样式

CSS全称是层叠样式表，元素的最终渲染结果是由多个CSS样式叠加后的结果，可以通过查询计算样式获得最终的叠加结果

getComputedStyle()

元素的计算样式(computedStyle)是用一个 CSSStyleDeclaration对象来表示的，计算样式是只读的，主要通过getComputedStyle()方法实现

getComputedStyle()方法接收两个参数：要取得计算样式的元素和一个伪元素字符串。如果不需要伪元素信息，第二个参数可以是null或者直接省略。

getComputedStyle()方法原本是window对象下的方法，后来“DOM2级样式”增强了document.defaultView，也提供了getComputedStyle()方法，现在getComputedStyle()方法一共有下面3种写法：

1、document.defaultView.getComputedStyle(div).width

2、window.getComputedStyle(div).width

3、getComputedStyle(div).width

<div id="test" style="width: 100px;"></div>
<script>
// 结果都是 '100px'
console.log(document.defaultView.getComputedStyle(test).width);
console.log(window.getComputedStyle(test).width);
console.log(getComputedStyle(test).width);
</script>

伪元素

第二个参数代表伪元素字符串，包括"::before"、"::after"、"::first-line"、"::first-letter"等，如果设置为null或省略不写，则返回自身元素的CSSStyleDeclaration对象

关于伪元素和伪类的区别移步至此

<style>
#test::before{
  content:'';
  display: inline-block;
  width:20px;
}
</style>
<div id="test" style="width: 100px;"></div>
<script>
console.log(getComputedStyle(test,'::before').width); //'20px'
</script>

注意事项

1. 对于font、background、border等复合样式，各浏览器处理不一样。chrome会返回整个复合样式，而IE9+、firefox和safari则输出空字符串''

<div id="test" style="font-size:20px"></div>
<script>
// chrome返回normal normal 400 normal 20px / normal "Microsoft YaHei"，其他浏览器返回''
console.log(getComputedStyle(test).font);
</script>

2. 不论以什么格式设置颜色，浏览器都以rgb()或rgba()的形式输出

3. 类似百分比等相对单位会转换为绝对值

<div id="test" style="width:20%;"></div>
<script>
console.log(getComputedStyle(test).width); // '170.797px'
</script>