86 js获取元素样式值

前面学习了如何设置元素的样式，但如何获取元素的样式呢？

1、样式的种类

行内式：直接写在DOM元素的style属性中。
嵌入式：写在html页面中的<style></style>中的样式。
外链式： 由link标签引入的css文件中的样式。
优先级：行内 > 嵌入 > 外链

2、元素.style.属性名

行内式才有效，对嵌入式和外链式无效。在真实项目中，由于无法实现html和css分离，所以这种方式不常用。


通过”元素.style.属性名“的方式并没有获取到left和top的值，需要将left和top写成行内式才行。


再来看一个测试例子：


可以看到height值和backgroundColor值没有被获取到，所以我们得到以下结论：
style只能获取行内样式的值，无法获取嵌入式样式和外部样式的值。

2、window.getComputedStyle()

使用window.getComputedStyle()这个方法获取所有经过浏览器计算过的样式，只要当前的元素标签可以在页面中呈现出来，那么它的所有样式都是经过浏览器计算过的/渲染过的），哪怕有些样式没有写，我们也可以获取到。

window.getComputedStyle(当前要操作的元素对象,当前元素的伪类[一般情况下没有伪元素时写null])

3、currentStyle

在IE6~8下不兼容，因为window下没有getComputedStyle这个属性。
在IE6~8下可以使用currentStyle来获取所有经过浏览器计算过的样式

4、兼容写法

5、获取元素样式值的方法