使用JavaScript获取CSS属性值

如果需要在JavaScript中设置元素的属性值，通常是比较简单的，只需通过obj.style.[attr]就可以了。

例如有一个HTML结构：

<div id="div1"></div>

现在要设置div元素的宽为100px:

var div = document.getElementById("div1");
div.style.width = '100px';

这样的话，HTML结构会变成这样：

<div id="div1" style="width:100px;"></div>

也就是说，JavaScript只能读取和改变元素内嵌样式，而写在外部CSS文件中和内联样式中属性，JavaScript是无法获得的。

其实也很容易理解，因为内嵌样式的优先级最高，这样可以确保JavaScript中修改的样式得到执行。

但有时我们需要获取某个元素当前的样式，这就需要其他办法了。

JavaScript中有一个getComputedStyle()方法，它得到所有的实际(computed) CSS指定元素的属性和值。计算出的样式是在显示元件，来自多个样式源计算以后最终的样式。

样式来源包括：内部样式表，外部样式表，继承的样式和浏览器默认样式。

所述getComputedStyle()方法返回一个CSSStyleDeclaration对象。

我们通过一个例子来说明：

function getStyle(obj, attr) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(obj, null)[attr];
    } else if (obj.currentStyle) {
        return obj.currentStyle[attr];
    }
    return null;
}

其中currentStyle是早期IE的方法，IE9已经开始支持getComputedStyle方法了。

需要注意的是，不能通过getComputedStyle方法改变属性值，改变属性值，还是需要使用obj.style.[attr]的方法。

使用JavaScript获取CSS属性值

推荐阅读更多精彩内容