深入理解getComputedStyle

Posted 2020-08-29 Wayne Zhu

深入理解getComputedStyle

　　jQuery的css()的底层实现就用到了getComputedStyle这个方法，也许我们用到的很少，但是不得不说这时一个非常强大的函数，下面让我们一探究竟！

 

第一部分：基本语法

　　在mdn上，我们可以看到它是这样定义的:

The Window.getComputedStyle() method gives the values of all the CSS properties of an element after applying the active stylesheets and resolving any basic computation those values may contain.

　　即这个方法会返回一个元素的所有属性，无论是我们预先定义的，还是继承的或默认的。

　　基本语法如下所示：

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

　　它接受两个参数，第一个是一个元素，这时必选的；第一个是伪元素(pseudo element)，它是可选的，所以用[]括起来，值得注意的是，如果没有伪元素时，我们可以用null来代替，当然也可以不写null。并且这个方法会返回一个CSSStyleDeclaration对象，它包含了所有的css属性。

 

第二部分：实例

　　正所谓是骡子是马，拉出来遛遛，他有什么用呢？

　　在页面的控制台中，在element下给一个元素添加id="testEL"，然后再控制台中输入：

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

　　此时，我们可以得到如下的代码：