html获取div宽度,【JS】获取元素宽度

微信订阅号：rabbit_svip

1、常见误区

element.style.width

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

比如：

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

但是如果div1的样式都是在

clientWidth

用 clientWidth 可以获得赋在元素上的样式属性。

比如：

HTML代码

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代码

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代码

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)

注意：

调用的时候，样式属性名要用引号括住。

如果调用像 border-color 这里值的时候，要把 “-” 去掉，第二个单词首字母大写(驼峰式写法)。

输出的值是带单位的。