[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
- -