取得div元素的邊界框：jQuery實作方法

Question

我想透過jQuery/JavaScript計算div元素的邊界框。

我嘗試了以下程式碼：

//盒子的左邊
document.getElementById("myElement").offsetLeft;
//盒子的頂部
document.getElementById("myElement").offsetTop;
//盒子的右邊
document.getElementById("myElement").offsetLeft document.getElementById("myElement").offsetWidth;
//盒子的底部
document.getElementById("myElement").offsetTop document.getElementById("myElement").offsetHeight;

它傳回一些值。是否這是透過jQuery/JavaScript取得div元素邊界框的正確方式。

我需要類似SVG元素中的getBBox()方法。它將傳回元素的x、y、width和height。同樣，我如何取得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欄位的物件。