[JavaScript] 要素の座標を取得する（.getBoundingClientRect()）

投稿日：2019年12月31日

要素の座標を取得するには、
.getBoundingClientRect() を使用します。

取得したい座標位置により以下の値を参照します。
　表示領域の上からの座標位置：.getBoundingClientRect().top
　表示領域の下からの座標位置：.getBoundingClientRect().bottom
　表示領域の左からの座標位置：.getBoundingClientRect().left
　表示領域の右からの座標位置：.getBoundingClientRect().right

サンプルソース

例）要素(id="d1")の座標位置をコンソールに表示する

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>座標位置取得サンプル</title>
<script>
window.onload = function(){
  var a = document.getElementById("d1").getBoundingClientRect();
  console.log("top:" + a.top);       //表示領域の上からの座標位置
  console.log("left:" + a.left);     //表示領域の左からの座標位置
  console.log("right:" + a.right);   //表示領域の右からの座標位置
  console.log("bottom:" + a.bottom); //表示領域の下からの座標位置
}
</script>
</head>
<body>
  <div id="d1" style="width:500px;height:300px;background-color:skyblue;">要素</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>座標位置取得サンプル</title>

window.onload = function(){

var a = document.getElementById("d1").getBoundingClientRect();

console.log("top:" + a.top); //表示領域の上からの座標位置

console.log("left:" + a.left); //表示領域の左からの座標位置

console.log("right:" + a.right); //表示領域の右からの座標位置

console.log("bottom:" + a.bottom); //表示領域の下からの座標位置

}

</script>

</head>

<body>

</body>

</html>

（結果）: top:8 left:8 right:508 bottom:308

デフォルトのmargin値8pxが反映された結果になっています。

備考

.getBoundingClientRect()メソッドに対して、.top、.bottom、.left、.right の値を参照することで各座標を取得できます。
取得する座標は、表示領域の左上を(0, 0) とした座標です。

執筆者：とら