getBoundingClientRect()メソッドの使い方

2024-04-03

HTML要素の位置（X,Y）を取得する

要素の座標系

要素の位置は、ページ座標系と親要素座標系の2つの座標系で取得できます。

ページ座標系: ページ全体を基準とした座標系です。要素の左上端が(0, 0)になります。
親要素座標系: 親要素を基準とした座標系です。要素の左上端が親要素の左上端からの相対的な位置になります。

JavaScriptによる座標取得

getBoundingClientRect() メソッドは、要素の境界ボックスの座標を取得します。境界ボックスとは、要素のコンテンツを含む最小の矩形です。

const element = document.querySelector('.element');
const rect = element.getBoundingClientRect();

// ページ座標系でのX座標
const x = rect.left;

// ページ座標系でのY座標
const y = rect.top;

offset() メソッドは、要素の左上端がページ左上端からの相対的な位置を取得します。

const element = document.querySelector('.element');
const offset = element.offset();

// ページ座標系でのX座標
const x = offset.left;

// ページ座標系でのY座標
const y = offset.top;

const element = document.querySelector('.element');
const position = element.position();

// 親要素座標系でのX座標
const x = position.left;

// 親要素座標系でのY座標
const y = position.top;

CSSによる座標取得

CSSの position プロパティを使って、要素の座標を指定できます。

.element {
  position: absolute;
  left: 10px;
  top: 10px;
}

上記コードでは、要素の左上端がページ左上端から10px離れた位置に配置されます。

まとめ

HTML要素の位置を取得するには、JavaScriptの getBoundingClientRect() メソッド、offset() メソッド、position() メソッド、またはCSSの position プロパティを使うことができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>要素の位置を取得</title>
</head>
<body>
  <div class="element">
    要素の位置を取得
  </div>
  <script>
    const element = document.querySelector('.element');
    const rect = element.getBoundingClientRect();

    // ページ座標系でのX座標
    const x = rect.left;

    // ページ座標系でのY座標
    const y = rect.top;

    console.log(`X座標: ${x}`);
    console.log(`Y座標: ${y}`);
  </script>
</body>
</html>