笔记归纳js getcomputedStyle, currentStyle 以及其相关用法

Posted 2020-09-07 Stitch晨

 

　   好吧，鉴于前端则个行业知识宽度广而深，早期看过高程介绍过的获取元素计算后的最终样式（浏览器显示的最终样式）的方法现在也忘得七七八八了　　

　　于是百度了一下，看了一下大神张鑫旭的博客，这里写个随笔记录一下，留作记录

 

　　获取元素的样式，我们平常用得最多的方法是 elem.style.xxx属性，此属性既可都又可写，但！它只能获取元素的内嵌样式，所以要获取一个元素的真正样式并不能通过这个方法获取，于是有了下面两个方法：

　　

　　getComputedStyle : （现代浏览器以及ie9+ 的浏览器适用）

　　1、此方法只读不可写

　　2、调用时的形式：window.getComputedStyle(元素,伪类);

　　　 此方法的第一个参数是元素的引用，第二个参数是一个伪类属性的名字，如果不需要刻意忽略但为了兼容某些老牌的浏览器还是要用null 填位

　　　 在 firefox 3.6 上使用此方法获取框架样式的时候需要这样写  window.defaultView.getComputedStyle(元素,伪类)

　　

　　currentStyle : 此方法和上面的方法是一样的，只是它是ie 独有的方法

　　1、此方法同样是可读不可写，而且它无法访问伪类属性

　　2、调用时的形式直接就是  element.currentStyle

　　

　　以上两个方法返回的都是元素在浏览器上运行时的样式方法，而要获取某一特定样式属性值就需要一下方法了

　　 第一个：getPropertyValue(属性名)

　　　　　　调用的方式就是上面两个方法的后面再调用

　　　　　　此方法的参数无需是驼峰形式按照 css 属性名的形式写就好

　　

　　 第二个：getAttribute(属性名)

 

　　　　　　这个是ie 的方法，ie9 以下的浏览器在调用 currentStyle 这个方法时只能通过这个方法获取特定的样式属性 

 

　　　　　　而 ie9+ 的浏览器也可以直接调用 getPropertyValue 这个方法获取特定样式属性

　　　　　　此方法的参数形式必须是驼峰形式

 

　　当然上面这两个方法也可以通过键值的方式去访问，但是浏览器对一些样式属性名存在差异性所以最好还是用上面的两个方法来访问特定属性吧

 

　　

　　第三个：getPropertyCssValue

　　　　　  不过这个方法极多浏览器不支持，慎用！

　 

 

　　想更深入理解访问这个链接：http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/