js获取css属性

2017-03-16

摘要：使用原生 js 获取 css 属性的方法

方法一：
element.style方法只能获取写在标签中 style 属性中的值<div style="height: 100px;">，而无法获取定义在<style>里面的属性

方法二：
ie通过element.currentStyle方法返回元素当前应用的最终CSS属性值（包括外链CSS文件，页面中嵌入的<style>属性等）

方法三：
其他浏览器通过 window.getComputedStyle 方法返回一个元素应用完有效样式且计算完所有属性的基本值之后给出所有CSS属性的值。语法let style = window.getComputedStyle(element, [pseudoElt]);第一个参数是要获取样式的元素，第二个参数是指定一个要匹配的伪元素的字符串，可以省略（或为 null）。在许多在线的演示代码中,getComputedStyle是通过document.defaultView对象来调用的，其实大部分情况下可以直接通过window对象调用
兼容性写法：

1
2
3

function getStyle(element, property) {
  return window.getComputedStyle ? window.getComputedStyle(element)[property] : element.currentStyle[property];
}

参考：
获取元素CSS值之getComputedStyle方法熟悉
 MDN Window.getComputedStyle()