如何使用香草JavaScript查找div的宽度？

JavaScript HTML

村村番长

2020-04-03

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

第4000篇《如何使用香草JavaScript查找div的宽度？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共6个回答

Tony凯 2020.04.03

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

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

米亚小哥 2020.04.03

实际上，您不必使用document.getElementById("mydiv") 。
您可以简单地使用div的ID，例如：

var w = mydiv.clientWidth;
或
var w = mydiv.offsetWidth;
等。

西里Near 2020.04.03

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

就像：

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

或边框宽度：

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

理查德伽罗 2020.04.03

document.getElementById("mydiv").offsetWidth

小小 2020.04.03

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

document.getElementsByClassName("myDiv")

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

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

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

小胖 2020.04.03

所有答案都是正确的，但是我仍然想给出其他可行的选择。

如果您正在寻找分配的宽度（忽略填充，边距等），则可以使用。

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android