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

Posted 2023-03-05

【中文标题】如何使用 vanilla JavaScript 查找 div 的宽度？

【英文标题】：How to find the width of a div using vanilla JavaScript?

【发布时间】：2011-06-14 19:46:36

【问题描述】：

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

【问题讨论】：

+1 表示“无 jQuery”评论 :)

Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively 的可能重复项（确实，这个问题在很久以后才被问到，但仍然有一个更详细的答案）。

【参考方案1】：

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

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

【参考方案2】：

获取计算样式的正确方法是等待页面呈现。可以通过以下方式完成。注意获取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(); ;

如果你只使用

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

您可以获得auto 的宽度和高度值，因为浏览器在执行完全加载之前不会呈现。

【参考方案3】：

您可以使用clientWidth 或offsetWidth Mozilla developer network reference

应该是这样的：

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

或带边框宽度：

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

【参考方案4】：

实际上，您不必使用document.getElementById("mydiv")。 您可以简单地使用 div 的 id，例如：var w = mydiv.clientWidth; 或var w = mydiv.offsetWidth; 等等

【参考方案5】：

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

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

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

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

【参考方案6】：

document.getElementById("mydiv").offsetWidth

element.offsetWidth (MDC)

【讨论】：

那个，或者cientWidth，虽然我不知道真正的区别。

offsetWidth 包括边框宽度，clientWidth 不包括。

当 myDiv 没有 CSS 规则但在标签中定义了“宽度”和“高度”时，offsetWidth 返回父宽度。没问题，我刚刚添加了 CSS 规则，效果很好。

@nim 如果你的 div 有display: none 或者不是文档的一部分，它的偏移高度总是为零。

This answer 对offsetWidth 和clientWidth 之间的区别进行了详细的可视化解释。

【参考方案7】：

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

document.getElementsByClassName("myDiv")

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

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

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

【参考方案8】：

在 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();