获取div元素的边界框：jQuery实现方法
P粉207483087
2023-08-22 11:18:36
<p>我想通过jQuery/JavaScript计算div元素的边界框。</p>
<p>我尝试了以下代码：</p>
<pre class="brush:php;toolbar:false;">//盒子的左边
document.getElementById("myElement").offsetLeft;
//盒子的顶部
document.getElementById("myElement").offsetTop;
//盒子的右边
document.getElementById("myElement").offsetLeft + document.getElementById("myElement").offsetWidth;
//盒子的底部
document.getElementById("myElement").offsetTop + document.getElementById("myElement").offsetHeight;</pre>
<p>它返回一些值。是否这是通过jQuery/JavaScript获取div元素边界框的正确方式。</p>
<p>我需要类似于SVG元素中的<code>getBBox()</code>方法。它将返回元素的<code>x</code>、<code>y</code>、<code>width</code>和<code>height</code>。同样，我如何获取div元素的边界框？</p>
由于这是专门为jQuery标记的 -
$("#myElement")[0].getBoundingClientRect();或者
$("#myElement").get(0).getBoundingClientRect();(这两者在功能上是相同的，在一些旧浏览器中，
.get()稍微快一些)请注意，如果您尝试通过jQuery调用来获取值，它将不会考虑任何css变换值，这可能会导致意外的结果...
注意2：在jQuery 3.0中，它已经改为使用适当的
getBoundingClientRect()调用来进行自身的尺寸调用（请参见jQuery Core 3.0升级指南） - 这意味着其他jQuery答案最终将始终正确 - 但仅在使用新的jQuery版本时才正确 - 这就是为什么它被称为破坏性变更的原因...你可以通过调用getBoundingClientRect方法来获取任何元素的边界框。
var rect = document.getElementById("myElement").getBoundingClientRect();这将返回一个具有left、top、width和height字段的对象。