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