JavaScript を使用してページ要素のオフセットを取得/計算する方法

質問

コントロールをクリックすると、コントロールの下にフローティングレイヤーが表示されます。通常の方法は、コントロールのオフセット値を取得し、フローティングレイヤーの top、left、その他の CSS プロパティの値を計算して割り当てます。

次に、コントロールのオフセット値を取得する方法を見てみましょう。

純粋なJS実装

最初に思い浮かぶのは、次のような js です。

コードをコピー

コードは次のとおりです。

document.getElementById("divFloat").style.top=document.getElementById("Button").offsetLeft+25;

値単位を追加する必要があることが判明した場合は、次のように変更します。

再度、IETesterとFireFoxでテストしたところ、IE6+では問題なく動作しました。前回同様、私が書いた純粋なjsメソッドはFireFoxに容赦なく無視され、取得された値は不正確でした。

オンラインで調べたところ、次のように記述する必要があることがわかりました。ループを実行し、レイヤーごとに計算して、最終的に正確なオフセット値を取得します。

コードをコピー

コードは次のとおりです。

関数 getOffsetLeft(o)
{
var 左 = 0;
var offsetParent = o;
(offsetParent != null && offsetParent != document.body) の場合
{
左 += offsetParent.offsetLeft;
offsetParent = offsetParent.offsetParent;
}</p> <p>左に戻ります。
}

jQueryの実装

関連する問題をより詳しく調べたところ、jQuery にはすでにこの関数を実装する関数 offset() が含まれており、さまざまなブラウザと非常に互換性があることがわかりました。

コードをコピー

コードは次のとおりです。

$("#ボタン").offset().左

ソースコードをダウンロードしたところ、jQueryは次のように実装されていることがわかりました。

コードをコピー

コードは次のとおりです。

jQuery.fn.extend({
位置: 関数() {
もし ( !this[0] ) {
null を返します。
}
var 要素 = this[0],
// *実際の* offsetParent を取得します
offsetParent = this.offsetParent(),
// 正しいオフセットを取得する
オフセット = this.offset(),
parentOffset = /^body|html$/i.test(offsetParent[0].nodeName) ? { top: 0, left: 0 } : offsetParent.offset();
// 要素の余白を減算する
// 注意: 要素に margin: auto がある場合、offsetLeft と marginLeft
// Safariでは同じなので、offset.leftが誤って0になる
offset.top -= parseFloat( jQuery.curCSS(elem, "marginTop", true) ) || 0;
offset.left -= parseFloat( jQuery.curCSS(elem, "marginLeft", true) ) || 0;
// offsetParent 境界を追加
parentOffset.top += parseFloat( jQuery.curCSS(offsetParent[0], "borderTopWidth", true) ) || 0;
parentOffset.left += parseFloat( jQuery.curCSS(offsetParent[0], "borderLeftWidth", true) ) || 0;
// 2つのオフセットを減算する
戻る {
上: offset.top - parentOffset.top、
左: offset.left - parentOffset.left
};
},
オフセット親: 関数() {
this.map(function() を返す {
var offsetParent = this.offsetParent || document.body;
offsetParent && (!/^body|html$/i.test(offsetParent.nodeName) && jQuery.css(offsetParent, "position") === "static") の間、
offsetParent = offsetParent.offsetParent;
}
offsetParent を返します。
});
}
});

計算方法は似ていますが、注意すべき点が 1 つあります。

offset() 関数は計算にマージン値を含めません (ただし、境界値は含めます)。

<<: HTMLプログラミングタグとドキュメント構造の詳細な説明

>>: Docker swarm の簡単なチュートリアル