javascriptを使ったHTML要素の位置取得
javascriptから取得できるHTML要素の位置は様々な種類があるので、後から参照できるようにまとめておく。jqueryなどのライブラリを使う方法については省略。ネイティブ環境で使えるもののみ扱う。各見出しはMDN web docsへのリンクになっているので、詳細はそちらを参照。
- HTML要素の位置取得
- mouseイベント、touchイベントの位置取得
- viewport上の位置への変換
- 参考
HTML要素の位置取得
style.xxx
基本情報
cssのプロパティを取得、設定する。
getBoundingClientRect()
基本情報
| 相対要素 | margin | border | padding |
|---|---|---|---|
| viewport | x | o | o |
viewport相対なので、scrollによって変化する。
取得できる値
大体はgetClientRects()と同じだが、こちらで取得すると要素のボーダーを含む全体についての値が得られる。
- top
- left
- bottom
- left
- x
- y
- width
- height
getClientRects()
基本情報
| 相対要素 | margin | border | padding |
|---|---|---|---|
| viewport | x | o | o |
viewport相対なので、scrollによって変化する。
取得できる値
大体はgetBoundingClientRect()と同じだが、こちらで取得すると一行ずつの値がリストで得られる。一行ずつというのは、インライン要素が途中で折り返して複数行に渡って表示される場合、各行についての値を取得できるということ。ブロック要素の場合は、リストの要素は一つだけ。この要素は、getBoundingClientRect()で得られるものと同じ。
- [
- top -left
- bottom
- left
- x
- y
- width
- height
]
getClientRects()についての参考
<div> <strong>span's rect</strong> <p> <span>Paragraph that spans multiple lines</span> </p> </div>
上の画像において、span's rectにおいて赤色で示されているのが、spanの各行に関するgetClientRects()の戻り値。
[read-only] offsetTop
[read-only] offsetLeft
| 相対要素 | margin | border | padding |
|---|---|---|---|
| offsetParent | x | o | o |
取得できる値
offsetTopとoffsetLeftは、offsetParentに対する一行目の相対位置。すなわち、getClientRects()が返すリストの初めの要素をoffsetParentが基準となるように変換しても得られる。
offsetTop
- offsetTop
offsetLeft
- offsetLeft
[read-only] offsetWidth
[read-only] offsetHeight
| 相対要素 | margin | border | padding |
|---|---|---|---|
| offsetParent | x | o | o |
取得できる値
offsetWidth
- offsetWidth
offsetHeight
- offsetHeight
offsetxxxについての参考
[read-only] offsetParent
positionがrelative、absolute、fixedのいずれかである要素のうち直近の先祖。
取得できる値
<div> <span>Short span. </span> <span>Long span that wraps within this div.</span> </div>
この画像の中で赤色で示されているものが、二つ目のspanのoffsetxxxの値。top、left、width、heightに二つ目のspan要素のoffsetxxxで得られる値を設定している。
mouseイベント、touchイベントの位置取得
mouseイベントやtouchイベントでは、clickまたはtouchした場所を取得できる。その値と実際の場所の関係を書いておく。
上の図では、pointで示される場所にclickまたはtouchしたと想定している。
viewport上の位置への変換
何らかの基準に対する相対位置が得られたときに、それをviewport上への位置に変換する方法を書いておく。先ほど示したように、pageとviewportの関係は、window.pageX/YOffsetで得られる。これはすなわちbodyとviewportの関係なので、viewportに対する相対位置にwindow.pageX/YOffsetを加えることで、body上での位置が得られる。
具体的には、
var client_rec = document.getElementById(...).getBoundingClientRect(); var element_x = window.pageXOffset + client_rec.x; var element_x = window.pageYOffset + client_rec.y;
とすることで、elementの座標element_xとelement_yが得られる。
参考
page、screen、viewportとかの関係
スマホの場合 (iphone上のsafariとchromeで確認)
基本的には上の図のようになるが、viewportが画面に収まるようにブラウザが自動的に拡大・縮小することがある。
パソコンの場合 (mac上のsafariで確認)
