Question

我想通过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，宽度和高度。同样如何才能获得div元素的边界框。

谢谢，

希瓦

Answer 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版本时 - 这就是为什么它被称为突破性改变......

Answer 2

您可以通过调用getBoundingClientRect

来获取任何元素的边界框

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

这将返回一个具有left，top，width和height字段的对象。

Answer 3

使用JQuery：

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

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

3 个答案: