首页手记【JS】获取元素宽度

【JS】获取元素宽度

标签：

JavaScript

微信订阅号：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)