web-dev-qa-db-ja.com

jqueryでdiv要素の境界ボックスを取得する方法

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要素の境界ボックスを取得する正しい方法であるかどうか。

SVG要素のgetBBox()メソッドのようなものが必要です。要素のx、y、幅、高さを返します。同様に、div要素の境界ボックスを取得するにはどうすればよいですか。

おかげで、

シヴァ

javascriptjqueryhtmlcsssvg
39
SivaRajini

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

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

それは、左、上、幅、高さのフィールドを持つオブジェクトを返します。

65
Robert Longson

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

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

または

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

（これらは機能的には同一であり、一部の古いブラウザでは.get()はわずかに高速でした）

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

注2：jQuery 3.0では、独自のディメンション呼び出しに適切なgetBoundingClientRect()呼び出しを使用するように変更されました（ jQuery Core 3.0 Upgrade Guide を参照）-つまり、他のjQueryが応答することを意味します最終的には常に正しい状態になります-ただし、新しいjQueryバージョンを使用する場合のみ-したがって、なぜそれが重大な変更と呼ばれるのか...

102
Rycochet

jQueryを使用：

myelement=$("#myelement")
[myelement.offset().left, myelement.offset().top,  myelement.width(), myelement.height()]
18
Arpit Agrawal