【JavaScript】要素の位置座標を取得する方法

2021年4月5日 2022年2月8日

こんにちは！CODE CLUB965のKです！

今回はJavaScriptで要素の位置座標を取得したいときの方法について書こうと思います。

何かを取得する方法はたくさんあるので、頭の片隅に置いといて必要な時に「確か方法あったなー」ぐらいで思い出せればとりあえず大丈夫です。（調べればなんとかなるので）

getBoundingClientRect()メソッドを使う

要素の位置座標を取得したければ、getBoundingClientRect() メソッドを使えば取得できます。

このメソッドは画面内(viewport)の位置座標を取得するので、スクロール量によって値が変わります。

コード例

// 要素を取得
var element = document.getElementById("element_id");
// 位置座標を取得
var rect = element.getBoundingClientRect() ;

// 画面の左端から、要素の左端までの距離
var x = rect.left ;

// 画面の上端から、要素の上端までの距離
var y = rect.top ;

上の例は表示されている画面内の位置座標なので、「ページ全体」における位置を取得したい場合は、スクロール量を取得して加えるといいです。

var element = document.getElementById("element_id");
var rect = element.getBoundingClientRect() ;

// ページの左端から、要素の左端までの距離
var x = window.pageXOffset + rect.left ;

// ページの上端から、要素の上端までの距離
var y = window.pageYOffset + rect.top ;

スクロール量を取得する場合は、「window.pageXOffset」と「window.pageYOffset」を使用すれば取得できます。

スクロール量の取得については、別に記事がありますので詳しく知りたい方は参考にどうぞ。

https://codeclub.commits.work/?p=1635