要素を移動させるには、座標についてよく知っている必要があります。
ほとんどの JavaScript メソッドは２つの座標系のいずれかを扱います:
- ウィンドウ(もしくは別のビューポート)の 上/左 を基準にします
- ドキュメントの 上/左 を基準とします
違いを理解し、どのタイプがどこにあるかを理解することは重要です。
ウィンドウ座標: getBoundingClientRect
ウィンドウ座標はウィンドウの左上端から始まります。
メソッド elem.getBoundingClientRect() はプロパティを持つオブジェクトとして elem に対するウィンドウ座標を返します。:
top– 要素の上端の Y-座標,left– 要素の左端の X-座標,right– 要素の右端の X-座標,bottom– 要素の下端の Y-座標.
このようになります:
ウィンドウ座標はドキュメントのスクロールアウト部分を考慮せず、ウィンドウの左上端から計算されたものになります。
言い換えると、ページをスクロールするとき、要素は上下に移動し、そのウィンドウ座標は変わります。これはとても重要です。
ボタンをクリックしてウィンドウ座標を見てみてください:
もしページをスクロールすると、ボタン位置は代わり、ウィンドウ座標も同様に変わります。
また:
- 座標は小数の場合があります。それは正常で、内部的にはブラウザは計算のためにそれを使用します。私たちは
style.position.left/topへ設定するときにそれらを丸める必要はありません。ブラウザで小数は問題ありません。 - 座標は負の値になる場合があります。例えば、ページが下にスクロールされ、
elemの上端がウィンドウの上にある場合、elem.getBoundingClientRect().topは負の値になります。 - Chromeような一部のブラウザでは、結果
getBoundingClientRectにプロパティwidthとheightも追加します。減算することでもそれらを取得することは可能です:height=bottom-top,width=right-left。
座標 右/下 は CSS プロパティとは異なります
ウィンドウ座標と CSSの配置を比較すると、position:fixed との明らかな類似点があります – ビューポートを基準とした位置も同じです。
しかし、CSS では right プロパティは右端からの距離を意味し、bottom は – 下端からの距離です。
上の図を見た時、JavaScriptではそうでないことが分かります。すべてのウィンドウ座標は左上隅から数えられます。
elementFromPoint(x, y)
document.elementFromPoint(x, y) の呼び出しは、ウィンドウ座標 (x, y) で最もネストされた要素を返します。
構文は次の通りです:
let elem = document.elementFromPoint(x, y);例えば、下のコードは今ウィンドウの中央にある要素のタグを強調表示し、出力します。: