50

我想通过 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 元素的边界框是否是正确的方法。

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

4

3 回答 3

120

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

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

或者

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

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

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

注意 2：在 jQuery 3.0 中，它已更改为getBoundingClientRect()对自己的维度调用使用正确的调用（请参阅jQuery Core 3.0 升级指南）——这意味着其他 jQuery 答案最终总是正确的——但仅在使用新的 jQuery 版本时- 因此为什么它被称为重大变化......

于 2014-06-25T13:40:24.090 回答
72

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

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

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

于 2013-09-13T07:51:36.610 回答
18

使用 jQuery：

myelement=$("#myelement")
[myelement.offset().left, myelement.offset().top,  myelement.width(), myelement.height()]
于 2013-09-13T07:03:02.417 回答