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))
此时,我们可以得到如下的代码:
时间: 2024-11-08 20:15:03