获取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标记的 -
或者
(这两者在功能上是相同的,在一些旧浏览器中,
.get()
稍微快一些)请注意,如果您尝试通过jQuery调用来获取值,它将不会考虑任何css变换值,这可能会导致意外的结果...
注意2:在jQuery 3.0中,它已经改为使用适当的
getBoundingClientRect()
调用来进行自身的尺寸调用(请参见jQuery Core 3.0升级指南) - 这意味着其他jQuery答案最终将始终正确 - 但仅在使用新的jQuery版本时才正确 - 这就是为什么它被称为破坏性变更的原因...你可以通过调用getBoundingClientRect方法来获取任何元素的边界框。
这将返回一个具有left、top、width和height字段的对象。