如何使用 vanilla JavaScript 查找 div 的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4787527/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to find the width of a div using vanilla JavaScript?
提问by Joda Maki
How do you find the current width of a <div>in a cross-browser compatible way withoutusing a library like jQuery?
如何<div>在不使用像 jQuery这样的库的情况下以跨浏览器兼容的方式找到 a 的当前宽度？
回答by Andy E
回答by khrizenriquez
You can use clientWidthor offsetWidthMozilla developer network reference
您可以使用clientWidth或offsetWidthMozilla 开发者网络参考
It would be like:
它会是这样的：
document.getElementById("yourDiv").clientWidth; // returns number, like 728
or with borders width :
或边框宽度：
document.getElementById("yourDiv").offsetWidth; // 728 + borders width
回答by Alex Flexlex Waldboth
All Answers are right, but i still want to give some other alternatives that may work.
所有答案都是正确的，但我仍然想提供一些其他可行的替代方案。
If you are looking for the assigned width (ignoring padding, margin and so on) you could use.
如果您正在寻找指定的宽度（忽略填充、边距等），您可以使用。
getComputedStyle(element).width; //returns value in px like "727.7px"
getComputedStyle allows you to access all styles of that elements. For example: padding, paddingLeft, margin, border-top-left-radius and so on.
getComputedStyle 允许您访问该元素的所有样式。例如：padding、paddingLeft、margin、border-top-left-radius等。
回答by user3386050
You can also search the DOM using ClassName. For example:
您还可以使用 ClassName 搜索 DOM。例如：
document.getElementsByClassName("myDiv")
This will return an array. If there is one particular property you are interested in. For example:
这将返回一个数组。如果您对某一特定属性感兴趣。例如：
var divWidth = document.getElementsByClassName("myDiv")[0].clientWidth;
divWidthwill now be equal to the the width of the first element in your div array.
divWidth现在将等于 div 数组中第一个元素的宽度。
回答by Ari
Actually, you don't have to use document.getElementById("mydiv").
You can simply use the id of the div, like:var w = mydiv.clientWidth;
orvar w = mydiv.offsetWidth;
etc.
实际上，您不必使用document.getElementById("mydiv").
您可以简单地使用 div 的 id，例如：var w = mydiv.clientWidth;
或var w = mydiv.offsetWidth;
等。
回答by user4617883
Another option is to use the getBoundingClientRect function. Please note that getBoundingClientRect will return an empty rect if the element's display is 'none'.
另一种选择是使用 getBoundingClientRect 函数。请注意，如果元素的显示为“none”，则 getBoundingClientRect 将返回一个空矩形。
var elem = document.getElementById("myDiv");
if(elem) {
var rect = elem.getBoundingClientRect();
console.log(rect.width);
}
回答by Siarhei Kuchuk
The correct way of getting computed style is waiting till page is rendered. It can be done in the following manner. Pay attention to timeout on getting autovalues.
获取计算样式的正确方法是等待页面呈现。它可以通过以下方式完成。注意获取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(); };
If you use just
如果你只使用
window.onload=function() {
var computedStyle = window.getComputedStyle(document.getElementById('__root__'));
}
you can get autovalues for width and height because browsers does not render till full load is performed.
您可以获得auto宽度和高度的值，因为浏览器在执行完全加载之前不会呈现。
回答by Amrik
call below method on div or body tag onclick="show(event);" function show(event) {
在 div 或 body 标签上调用以下方法 onclick="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();
}
}
