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

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; 

它返回一些值.是否正确获取div元素的边界框jquery / javascript.

我需要像元素中的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升级指南) - 这意味着其他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()]