微信訂閱號：rabbit_svip

1、常見誤區(qū)
element.style.width

通過 element.style.width 這個方法，獲取到的是在html元素中內(nèi)聯(lián)的寬度。

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

如果是上面這種寫法，用 div1.style.width 這種方法就可以獲取div1的寬度。

但是如果div1的樣式都是在<style>里寫的，或者是連了別的css文件，用 element.style.xxx 這種寫法就獲取不到元素對應(yīng)的樣式屬性了。

clientWidth

用 clientWidth 可以獲得賦在元素上的樣式屬性。

比如：

HTML代碼

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

CSS代碼

#div1 {
    width: 100px;
    margin: 10px;
    padding: 20px;
    border: 30px solid #ccc;
}

JS代碼

console.log(div1.clientWidth);

// 最后輸出：140

因?yàn)?clientWidth 會把元素的 width 和 padding 都算上。
因?yàn)樵刈笥叶加?padding 值，所以是 20 + 100 + 20 = 140。

offsetWidth

HTML代碼

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

CSS代碼

#div1 {
    width: 100px;
    margin: 10px;
    padding: 20px;
    border: 30px solid #ccc;
}

JS代碼

console.log(div1.offsetWidth);

// 輸出：200

因?yàn)?offsetWidth 會把元素的 width、padding 和 border 都加在一起。

因?yàn)樵刈笥叶加?padding 和 border，
所以是：20 + 30 + 100 + 30 + 20 = 200

currentStyle 和 getComputedStyle

用 currentStyle 和 getComputedStyle 可以只獲取元素的指定樣式。

但老IE不兼容 getComputedStyle，而chrome和Firefox又不兼容 currentStyle 。

所以可以封裝成下面這種樣子

JS代碼

function getStyle(obj,styleName) {
    if(obj.currentStyle) {
        return obj.currentStyle[styleName];
    } else {
        return getComputedStyle(obj, false)[styleName];
    }
}

調(diào)用：

HTML代碼

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

CSS代碼

#div1 {
    width: 100px;
    margin: 10px;
    padding: 20px;
    border: 30px solid #ccc;
}

JS代碼

function getStyle(obj,styleName) {
    if(obj.currentStyle) {
        return obj.currentStyle[styleName];
    } else {
        return getComputedStyle(obj, false)[styleName];
    }
}

console.log(getStyle( div1, 'width' ));
console.log(getStyle( div1, 'borderColor' ));

// 輸出：100px
// 輸出：rgb(204, 204, 204)

注意：

1. 調(diào)用的時候，樣式屬性名要用引號括住。
2. 如果調(diào)用像 border-color 這里值的時候，要把 “-” 去掉，第二個單詞首字母大寫（駝峰式寫法）。
3. 輸出的值是帶單位的。