【JS】获取元素宽度

微信订阅号：rabbit_svip

1、常见误区
element.style.width

通过 element.style.width 这个方法，获取到的是在html元素中内联的宽度。

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

如果是上面这种写法，用 div1.style.width 这种方法就可以获取div1的宽度。

但是如果div1的样式都是在<style>里写的，或者是连了别的css文件，用 element.style.xxx 这种写法就获取不到元素对应的样式属性了。

---

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

因为 clientWidth 会把元素的 width 和 padding 都算上。
因为元素左右都有 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

因为 offsetWidth 会把元素的 width、padding 和 border 都加在一起。

因为元素左右都有 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];
    }
}

调用：

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. 调用的时候，样式属性名要用引号括住。
2. 如果调用像 border-color 这里值的时候，要把 “-” 去掉，第二个单词首字母大写（驼峰式写法）。
3. 输出的值是带单位的。