JS - 获取CSS属性值 getComputedStyle()与currentStyle()、style()方法

在对网页进行调试的过程中，经常会用到js来获取元素的CSS样式，

1. obj.style：

这个方法JS只能获取写在html标签中的写在style属性中的值（style=”…”），而无法获取定义在<style type="text/css">里面的属性。

2.Window.getComputedStyle()

• 返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。
• 私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。
• getComputedStyle获取的是计算机（浏览器）计算后的样式，但是不兼容IE6、7、8

语法：

let style = window.getComputedStyle(element, [pseudoElt]);

element： 用于获取计算样式的Element。

pseudoElt 可选：指定一个要匹配的伪元素的字符串。必须对普通元素省略（或null）。

返回的style是一个实时的 CSSStyleDeclaration对象，当元素的样式更改时，它会自动更新本身。

（CSSStyleDeclaration 接口表示一个对象，它是一个 CSS 声明块，CSS 属性键值对的集合。它暴露了样式信息和各种与样式相关的方法和属性。）

3.Element.currentStyle

Element.currentStyle 是一个与Window.getComputedStyle()方法功能相同的属性。这个属性实现在旧版本的IE浏览器中.

---

属性判断法、版本检测法来解决浏览器间的兼容性问题

    function getStyle(obj, arr) {
            if (obj.currentStyle) {
                return obj.currentStyle[arr]; //针对ie
            } else {
                return document.defaultView.getComputedStyle(obj, null)[arr];
            }
        }

or:

  function getStyle(obj, attr) {
            return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr];
        }

注意：

• 如果用以上的方法获取某个元素的复合样式，例如background，那么就不要用上面那种方式获取，在不同浏览器间有兼容性问题。用上面的方法获得单一样式，而不要用来获取复合样式。
• 使用以上方法，注意不要多按空格
• 使用以上方法，不要获取未设置后的样式，因为浏览器间不兼容
• 在火狐4.0之前，有个bug，如果getComputedStyle后面不跟参数，会出现问题，所以有些人写成getComputedStyle(obj, false)，那个false就是为了解决这个bug。这里的bug也可以写成0，或者其他任何参数都可以。不过目前火狐的浏览器都比较高，因此这个问题已经不是很常见了。