別の要素に対する要素の「視覚的な」位置 (DOM ツリーの位置ではない) を知るための最良の方法を決定しようとしています。
たとえば、要素の配列があり、選択された要素があり、それらの要素のどれが選択された要素の右側に視覚的に配置されているかを知りたいとします。
また、要素は任意のタグ タイプにすることができ、任意の位置 (相対、絶対、固定) と表示 (可視である限り) を持つことができることに注意してください。
jQuery ソリューションは大歓迎です。
別の要素に対する要素の「視覚的な」位置 (DOM ツリーの位置ではない) を知るための最良の方法を決定しようとしています。
たとえば、要素の配列があり、選択された要素があり、それらの要素のどれが選択された要素の右側に視覚的に配置されているかを知りたいとします。
また、要素は任意のタグ タイプにすることができ、任意の位置 (相対、絶対、固定) と表示 (可視である限り) を持つことができることに注意してください。
jQuery ソリューションは大歓迎です。
単純に and を使用element.offsetTop
してelement.offsetLeft
みませんか?offsetTop
は y 軸、offsetLeft
は x 軸です。
jQuery はまったく必要ありません$(element).offset();
。
ウィンドウの左上隅が 0-0 ポイントであることに注意してください。左に「くっついた」要素には がありoffsetLeft === 0
、上にくっついている要素には がありoffsetTop === 0
ます。それだけです 本当に
zeaklous のコメントへの応答:オブジェクトの寸法
を取得するには:
var dimension = {top: {x: element.offsetLeft, y: element.offsetTop},
bottom: {x: element.offsetWidth, y: element.offsetHeight}
};
DOM が再描画されたばかりの場合に 0 を返すことが知られていることに注意してください (変更したばかりの要素からこれらのプロパティを取得すると、これが発生する可能性がありますoffsetWidth
) 。
それを避けるために、変更された可能性があると思われる要素のオフセットを取得するときに使用する傾向がある人もいます。offsetHeight
setTimeout();
コメントに応えて、プロパティgetBoundingClientRect
の問題を回避するために単純に使用できることが指摘されました。offsetX
document.getElementById('foo').getBoundingClientRect();
ClientRect
これは、再生できるオブジェクトのインスタンスを返します。詳細は MDN を確認してください