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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
これは特に jQuery 用にマークされているため -
リーリー ＃＃＃または＃＃＃ リーリー(この 2 つは機能的には同じですが、一部の古いブラウザでは
.get()の方がわずかに高速です)
注 2: jQuery 3.0 では、適切な
getBoundingClientRect()呼び出しを使用して独自のサイズ呼び出しを行うように変更されました (
jQuery Core 3.0 アップグレード ガイドを参照) - これこれは、他の jQuery の答えが最終的には常に正しいことを意味します - ただし、新しい jQuery バージョンを使用する場合に限ります - これが、破壊的変更と呼ばれる理由です...getBoundingClientRect メソッドを呼び出すことで、任意の要素の境界ボックスを取得できます。
リーリーこれは、左、上、幅、高さのフィールドを持つオブジェクトを返します。