最近在做一个进度条组件,需要获取div元素的宽度。例如:
<div id="myDiv" style="width: 200px; height: 200px; background-color: gray">
</div>
获取myDiv元素的宽度:
var divWidth = document.getElementById("myDiv").style.width;
console.log("mydiv width: " + divWidth);
另外一个同事在用这个组件的时候,没有用style , 而是用的class 。 发现获取的divWidth为空。
在没有设置内边距的情况下,可以用clientWidth来获取宽度。
var divWidth = document.getElementById("myDiv").clientWidth;
console.log("myDiv width: " + divWidth);
style.width 获取的是元素自身的宽度,不包括内边距,边框和外边距
clientWidth 获取的是元素自身的宽度+内边距, 但不包括边框和外边距