如何找到一个div的宽度使用香草JavaScript?

你如何找到一个<div>的当前宽度在跨浏览器兼容的方式没有使用库像jQuery?

436807 次浏览
小开
最佳答案 
document.getElementById("mydiv").offsetWidth
小开

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

document.getElementsByClassName("myDiv")

这将返回一个数组。如果有你感兴趣的房产。例如:

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

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

小开

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

就像:

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

或与边框宽度:

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

调用div或body标签下面的方法onclick="show(事件);" 函数show(event) {

        var x = event.clientX;
var y = event.clientY;


var ele = document.getElementById("tt");
var width = ele.offsetWidth;
var height = ele.offsetHeight;
var half=(width/2);
if(x>half)
{
//  alert('right click');
gallery.next();
}
else
{
//   alert('left click');
gallery.prev();
}




}
小开

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

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

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

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

小开

实际上，你不必使用document.getElementById("mydiv") 你可以简单地使用div的id，比如:

var w = mydiv.clientWidth; < br > 或< br > var w = mydiv.offsetWidth; < br > 等。< / p >

小开

获得计算样式的正确方法是等待页面呈现。它可以通过以下方式完成。注意获取auto值时的超时。

function getStyleInfo() {
setTimeout(function() {
const style = window.getComputedStyle(document.getElementById('__root__'));
if (style.height == 'auto') {
getStyleInfo();
}
// IF we got here we can do actual business logic staff
console.log(style.height, style.width);
}, 100);
};


window.onload=function() { getStyleInfo(); };

如果你用just

window.onload=function() {
var computedStyle = window.getComputedStyle(document.getElementById('__root__'));
}

你可以得到宽度和高度的auto值，因为浏览器直到执行满加载才会呈现。

小开

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

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

提交答案