Mmemo

PC作業に関する覚書やweb制作記録。
無料で使える便利ツールやwebアプリも制作。サイト上(ブラウザ上)で動作。

[JS] 要素・マウスカーソルの位置座標取得方法 [offsetX/Y,clientX/Y,pageX/Y,screenX/Y]

概要

JavaScriptにおける要素とマウスカーソルの位置座標(各起点からの座標や相対座標)の取得方法まとめ。 

本体

要素A
x方向のスクロール量
window.pageXOffset
-
y方向のスクロール量
window.pageYOffset
-
要素Aの幅
element.clientWidth
-
要素Aの高さ
element.clientHeight
-
要素Aのviewport内x座標
element.getBoundingClientRect().left
-
要素Aのviewport内y座標
element.getBoundingClientRect().top
-
要素Aのページ内x座標
window.pageXOffset + element.getBoundingClientRect().left
-
要素Aのページ内y座標
window.pageYOffset + element.getBoundingClientRect().top
-
マウスカーソルの対象要素内x座標
e.offsetX
-
マウスカーソルの対象要素内y座標
e.offsetY
-
マウスカーソルのviewport内x座標
e.clientX
-
マウスカーソルのviewport内y座標
e.clientY
-
マウスカーソルのページ内x座標
e.pageX
-
マウスカーソルのページ内y座標
e.pageY
-
マウスカーソルの画面内x座標
e.screenX
-
マウスカーソルの画面内y座標
e.screenY
-