ドキュメント領域ドキュメントに対するページ上の要素の水平・垂直座標を取得する2つの方法とその比較
jsで要素の移動を制御する処理において、ページ要素の座標位置を取得するためによく使われます。ここでは主に次の 2 つのメソッドをまとめます。 1 つのメソッド:
1 つ: 要素オブジェクトの offsetLeft/offsetTop プロパティとその offsetParent (存在する場合) をオーバーレイすることで実装されます。
『JavaScript Advanced Programming Third Edition』の DOM セクション そのとき、ページ上の要素のオフセットを取得するには、この要素の offsetLeft と offsetTop をその offsetParent の同じ属性に追加し、最後までループする必要があることを学びました。ルート要素。したがって、ドキュメント領域に対する要素の座標位置を取得するには、while ループを使用して、offsetParent = null になるまで offsetParent の offsetLeft/offsetTop を継続的に取得するだけです。
js コード:
// ドキュメント領域の要素の座標を取得します。
function getPosition(element) {
varactualLeft = element.offsetLeft,
actualTop = element.offsetTop,
current = element. offsetParent; // 要素 offsetParent を取得します
// ルート要素までループします
while (current !== null) {
actualLeft = current.offsetLeft;
actualTop = current.offsetTop; >current = current.offsetParent ;
}
// 左と上の座標を含むオブジェクトを返します
return {
left:actualLeft,
top:actualTop
};
スクリーンショットの例
:
firebug でのテスト結果のスクリーンショット: (注: 他のブラウザはテストに合格しました!) 
2: getBoundingClientRect() メソッドによって実装されます
getBoundingClientRect メソッドは、ブラウザ ウィンドウを基準としたページ上の要素の左、上、右、下の位置を取得するために使用されます。返されるのは、top、left、right、bottom の 4 つの属性を持つオブジェクトです。このメソッドは元々 IE のみでしたが、FF3.0 と Opera9.5 では既にこのメソッドがサポートされており、ページ要素の取得に便利であると言えます。効率が大幅に向上します。 さらに、このメソッドは while ループの使用を回避しますが、実装する数値を直接取得します。これにより、特に複雑なページで最初のメソッドよりもパフォーマンスが向上します。
js コード
:
// ドキュメント領域への要素の座標を取得します。
function getPosition(element){
var dc = document,
rec = element.getBoundingClientRect(),
_x = rec. left, // 要素を取得します。 ブラウザ ウィンドウを基準とした左と上の座標です。
_y = rec.top
// html 要素または body 要素のスクロール距離に要素の相対的な座標位置が追加されます。ドキュメント領域へ
_x = dc .documentElement.scrollLeft || dc.body.scrollLeft;
return {
left: _x,
top: _y
};
}
テスト後、このメソッドはドキュメントに対する要素の座標サイズを取得する最初のメソッドと同じです。 . IE ブラウザの以前のバージョンでは、いくつかの違いがあります。
注: HTML (IE を除く) 要素または body (IE の場合) 要素の水平または垂直スクロール距離を合計することを忘れないでください。
結論: 上記では、ドキュメント領域に対する要素の座標位置を取得する方法を説明しました。関連する問題が発生した場合は、私に連絡するか、直接コメントを残すことができます。取得するには、要素自体の幅 (elem.offsetWidth) と高さ (elem.offsetHeight) に左と上の座標のサイズを加算するだけです。 もちろん、offsetWidth 属性と offsetHeight 属性によってパディングとボーダーが計算されます。最良の方法は、getBoundingClientRect メソッドを通じて取得することです。 ps: さらに、このメソッドを使用して、オブジェクトの right-left = 要素の幅、bottom-top = 要素の高さを返します。枠線なしの要素自体の幅と高さを取得できます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
