getBoundingClientRect()メソッドでdiv/spanタグの位置を取得する方法

2024-04-08

JavaScript/HTML で div/span タグの位置を取得する方法

HTML の div や span タグの位置を取得するには、JavaScript のいくつかの方法を使うことができます。

方法

getBoundingClientRect() メソッド

この方法は、要素の相対的な位置とサイズを取得します。

const element = document.getElementById("my-element");
const rect = element.getBoundingClientRect();

// 要素の左上の座標
const x = rect.left;
const y = rect.top;

// 要素の幅と高さ
const width = rect.width;
const height = rect.height;

offsetTop/offsetLeft プロパティ

const element = document.getElementById("my-element");

// 親要素からの水平方向のオフセット
const offsetLeft = element.offsetLeft;

// 親要素からの垂直方向のオフセット
const offsetTop = element.offsetTop;

getComputedStyle() メソッド

const element = document.getElementById("my-element");
const style = getComputedStyle(element);

// 要素の左上の座標
const x = parseInt(style.getPropertyValue("left"));
const y = parseInt(style.getPropertyValue("top"));

CSS position プロパティ

要素の position プロパティが absolute または fixed の場合、このプロパティを使って位置を取得できます。

const element = document.getElementById("my-element");

// 要素の左上の座標
const x = parseInt(element.style.left);
const y = parseInt(element.style.top);

要素の相対的な位置とサイズを取得したい場合は、getBoundingClientRect() メソッドを使うのがおすすめです。
要素の親要素からの相対的な位置を取得したい場合は、offsetTop や offsetLeft プロパティを使うのがおすすめです。
要素のスタイル情報に基づいて位置を取得したい場合は、getComputedStyle() メソッドを使うのがおすすめです。

補足

上記の例は、要素が単一の親要素を持っていることを前提としています。
要素が複数の親要素を持っている場合は、offsetParent プロパティを使って親要素を取得する必要があります。
要素がスクロール可能な要素内にある場合は、スクロール位置を考慮する必要があります。

JavaScript で要素の位置を取得する方法は他にもあります。
上記の方法は、基本的な方法をいくつか紹介しただけです。
詳細については、JavaScript のドキュメントを参照してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルコード</title>
</head>
<body>
  <div id="my-element" style="width: 100px; height: 100px; background-color: red;">
    これはサンプル要素です。
  </div>

  <script>
    const element = document.getElementById("my-element");

    // getBoundingClientRect() メソッドを使う
    const rect = element.getBoundingClientRect();
    console.log(`左上の座標: (${rect.left}, ${rect.top})`);
    console.log(`幅と高さ: (${rect.width}, ${rect.height})`);

    // offsetTop/offsetLeft プロパティを使う
    const offsetLeft = element.offsetLeft;
    const offsetTop = element.offsetTop;
    console.log(`親要素からのオフセット: (${offsetLeft}, ${offsetTop})`);

    // getComputedStyle() メソッドを使う
    const style = getComputedStyle(element);
    const x = parseInt(style.getPropertyValue("left"));
    const y = parseInt(style.getPropertyValue("top"));
    console.log(`スタイル情報に基づいた座標: (${x}, ${y})`);

    // position プロパティを使う
    element.style.position = "absolute";
    element.style.left = "10px";
    element.style.top = "10px";
    const x2 = parseInt(element.style.left);
    const y2 = parseInt(element.style.top);
    console.log(`position プロパティを使った座標: (${x2}, ${y2})`);
  </script>
</body>
</html>

このコードを実行すると、コンソールに以下の出力が表示されます。

左上の座標: (10, 10)
幅と高さ: (100, 100)
親要素からのオフセット: (10, 10)
スタイル情報に基づいた座標: (10, 10)
position プロパティを使った座標: (10, 10)

上記のコードは、基本的な例です。
実際の用途に合わせてコードを編集する必要があります。
JavaScript で要素の位置を取得する方法について、詳しくはドキュメントを参照してください。

JavaScript/HTML で div/span タグの位置を取得するその他の方法

getBoundingClientRect() メソッドには、オプションパラメータとして relativeTo を指定することができます。

このパラメータを指定することで、要素の位置を基準にして座標を取得することができます。

const element = document.getElementById("my-element");
const rect = element.getBoundingClientRect({ relativeTo: document.body });

// 要素の左上の座標 (body 要素からの相対位置)
const x = rect.left;
const y = rect.top;

offsetParent プロパティは、要素のスクロール可能な親要素を取得します。

このプロパティを使って、スクロール可能な要素内にある要素の位置を取得することができます。

const element = document.getElementById("my-element");
const offsetParent = element.offsetParent;

// 要素の左上の座標 (offsetParent 要素からの相対位置)
const x = element.offsetLeft;
const y = element.offsetTop;

要素の transform プロパティを使って、要素の位置を変更することができます。

const element = document.getElementById("my-element");
const transform = element.style.transform;

// 要素の左上の座標
const x = parseInt(transform.match(/translate\((.*?)\)/)[1].split(",")[0]);
const y = parseInt(transform.match(/translate\((.*?)\)/)[1].split(",")[1]);

jQuery ライブラリを使うと、要素の位置を取得するコードを簡単に記述することができます。

const element = $("#my-element");

// 要素の左上の座標
const x = element.offset().left;
const y = element.offset().top;

要素がスクロール可能な要素内にある場合は、offsetParent プロパティを使うのがおすすめです。
CSS の transform プロパティを使って要素の位置を変更している場合は、transform プロパティを使って位置を計算するのがおすすめです。
jQuery ライブラリを使っている場合は、jQuery のメソッドを使うのが簡単です。

JavaScript/HTML で div/span タグの位置を取得するには、いくつかの方法があります。

上記の情報を参考に、適切な方法を選択してください。

javascript html