如何使用原始JavaScript找到div的宽度？

Question

如何<div>在不使用像jQuery 这样的库的情况下以跨浏览器兼容的方式找到a的当前宽度？

Answer 1

document.getElementById("mydiv").offsetWidth

Answer 2

您可以使用clientWidth或offsetWidth Mozilla开发人员网络参考

这将是:

document.getElementById("yourDiv").clientWidth; // returns number, like 728

或带边框宽度:

document.getElementById("yourDiv").offsetWidth; // 728 + borders width

Answer 3

另一种选择是使用 getBoundingClientRect 函数。请注意，如果元素的显示为“无”，则 getBoundingClientRect 将返回一个空矩形。

var elem = document.getElementById("myDiv");
if(elem) {
   var rect = elem.getBoundingClientRect();
   console.log(rect.width);  
}

Answer 4

所有答案都是正确的,但我仍然想提供其他一些可行的替代方案.

如果您正在寻找指定的宽度(忽略填充,边距等),您可以使用.

getComputedStyle(element).width; //returns value in px like "727.7px"

getComputedStyle允许您访问该元素的所有样式.例如:padding,paddingLeft,margin,border-top-left-radius等.

Answer 5

您还可以使用 ClassName 搜索 DOM。例如：

document.getElementsByClassName("myDiv")

这将返回一个数组。如果您对某一特定属性感兴趣。例如：

var divWidth = document.getElementsByClassName("myDiv")[0].clientWidth;

divWidth 现在将等于 div 数组中第一个元素的宽度。