50

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を返します。同様に、div要素の境界ボックスを取得するにはどうすればよいですか?xywidthheight

4

3 に答える 3

120

これは特にjQuery用にタグ付けされているため-

$("#myElement")[0].getBoundingClientRect();

また

$("#myElement").get(0).getBoundingClientRect();

(これらは機能的には同じですが、一部の古いブラウザー.get()ではわずかに高速でした)

jQuery 呼び出しを介して値を取得しようとすると、css 変換値が考慮されないことに注意してください。これにより、予期しない結果が生じる可能性があります...

注 2: jQuery 3.0 ではgetBoundingClientRect()、独自のディメンション呼び出しに適切な呼び出しを使用するように変更されました ( jQuery Core 3.0 Upgrade Guideを参照)。これは、他の jQuery の回答が最終的に常に正しいことを意味しますが、新しい jQuery バージョンを使用する場合のみです。 - したがって、破壊的変更と呼ばれる理由...

于 2014-06-25T13:40:24.090 に答える
72

getBoundingClientRectを呼び出すことで、任意の要素の境界ボックスを取得できます。

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

これにより、左、上、幅、高さのフィールドを持つオブジェクトが返されます。

于 2013-09-13T07:51:36.610 に答える