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 用にマークされているため -

リーリー ＃＃＃または＃＃＃ リーリー

(この 2 つは機能的には同じですが、一部の古いブラウザでは

.get()

の方がわずかに高速です) jQuery 呼び出しを介して値を取得しようとすると、CSS 変換値が考慮されないため、予期しない結果が生じる可能性があることに注意してください...

注 2: jQuery 3.0 では、適切な

getBoundingClientRect()

呼び出しを使用して独自のサイズ呼び出しを行うように変更されました (jQuery Core 3.0 アップグレード ガイド を参照) - これこれは、他の jQuery の答えが最終的には常に正しいことを意味します - ただし、新しい jQuery バージョンを使用する場合に限ります - これが、破壊的変更と呼ばれる理由です...

Answer 2

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

リーリー

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