如何<div>
在不使用jQuery之类的库的情况下以跨浏览器兼容的方式找到的当前宽度?
如何使用香草JavaScript查找div的宽度?
实际上,您不必使用document.getElementById("mydiv")
。
您可以简单地使用div的ID,例如:
var w = mydiv.clientWidth;
或
var w = mydiv.offsetWidth;
等。
您可以使用clientWidth
或offsetWidth
Mozilla开发人员网络参考
就像:
document.getElementById("yourDiv").clientWidth; // returns number, like 728
或边框宽度:
document.getElementById("yourDiv").offsetWidth; // 728 + borders width
document.getElementById("mydiv").offsetWidth
您也可以使用ClassName搜索DOM。例如:
document.getElementsByClassName("myDiv")
这将返回一个数组。如果您有一个特定的属性感兴趣,例如:
var divWidth = document.getElementsByClassName("myDiv")[0].clientWidth;
divWidth
现在将等于div数组中第一个元素的宽度。
所有答案都是正确的,但是我仍然想给出其他可行的选择。
如果您正在寻找分配的宽度(忽略填充,边距等),则可以使用。
getComputedStyle(element).width; //returns value in px like "727.7px"
getComputedStyle允许您访问该元素的所有样式。例如:padding,paddingLeft,margin,border-top-left-radius等。
另一个选择是使用getBoundingClientRect函数。请注意,如果元素的显示为“ none”,则getBoundingClientRect将返回一个空矩形。