码迷,mamicode.com
首页 > 其他好文 > 详细

深入理解getComputedStyle

时间:2017-02-02 23:49:15      阅读:294      评论:0      收藏:0      [点我收藏+]

标签:null   并且   styles   res   sheet   没有   属性   bsp   定义   

深入理解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))

  此时,我们可以得到如下的代码:

  

  

 

深入理解getComputedStyle

标签:null   并且   styles   res   sheet   没有   属性   bsp   定义   

原文地址:http://www.cnblogs.com/zhuzhenwei918/p/6361850.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!