如何在jQuery中获取div元素的边界框

Posted 2023-02-22

【中文标题】如何在jQuery中获取div元素的边界框

【英文标题】：How to get bounding box for div element in jQuery

【发布时间】：2013-09-17 18:38:37

【问题描述】：

我想通过 jQuery/javascript 计算 div 元素的边界框。

我试过这样：

//Left side of box 
document.getElementById("myElement").offsetLeft; 
//Top side of box 
document.getElementById("myElement").offsetTop;  
//Right side of box
document.getElementById("myElement").offsetLeft + document.getElementById("myElement").offsetWidth; 
//Bottom side of box 
document.getElementById("myElement").offsetTop + document.getElementById("myElement").offsetHeight; 

它返回一些值。通过 jQuery / JavaScript 获取 div 元素的边界框是否正确。

我需要 SVG 元素中的 getBBox() 方法。它将返回一个元素的x、y、width 和height。 Sameway 如何获取 div 元素的边界框？

【参考方案1】：

因为这是专门为 jQuery 标记的 -

$("#myElement")[0].getBoundingClientRect();

或

$("#myElement").get(0).getBoundingClientRect();

（这些在功能上是相同的，在一些旧浏览器中.get() 稍快）

请注意，如果您尝试通过 jQuery 调用获取值，则它不会考虑任何 css 转换值，这可能会产生意想不到的结果...

注意 2：在 jQuery 3.0 中，它已更改为对自己的维度调用使用正确的 getBoundingClientRect() 调用（请参阅 jQuery Core 3.0 Upgrade Guide）-这意味着其他 jQuery 答案最终将始终正确-但仅在使用新的 jQuery 版本 - 因此它被称为重大更改...

【参考方案2】：

可以通过调用getBoundingClientRect获取任意元素的边界框

var rect = document.getElementById("myElement").getBoundingClientRect();

这将返回一个包含左、上、宽和高字段的对象。

【讨论】：

请注意getBoundingClientRect 将返回相对于视口的坐标，而不是文档或父级。

【参考方案3】：

使用 jQuery：

myelement=$("#myelement")
[myelement.offset().left, myelement.offset().top,  myelement.width(), myelement.height()]

【讨论】：

是的，谢谢我知道这个概念。我在问是否是获取元素边界框的正确方法？

我建议使用outerWidth() 而不仅仅是width()。因此，它会考虑填充值（如果有）。

这没有考虑 css 转换 - 所以如果使用它就不会给出正确的答案。也可以通过缓存 offset() 结果来优化它。

如果元素有绝对位置怎么办？