JavaScriptを使用したCSS属性値の取得

JavaScriptで要素の属性値を設定必要がある場合、objを通過するだけで通常は比較的簡単である.style.[attr]でいいです.
たとえば、HTML構造があります.

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

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

これでHTML構造はこうなります.

也就是说，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の方法であり、IE 9はgetComputedStyleの方法をサポートし始めた.
なお、getComputedStyleメソッドでは属性値を変更できないか、属性値を変更するか、objを使用する必要があるかについては注意が必要である.style.[attr]の方法.