JavaScriptで要素の位置を取得する方法
Webページ上で要素がどこに配置されているかを知ることは、インタラクティブな機能を実装する上で非常に重要です。JavaScriptでは、要素の位置を取得するための便利なメソッドが用意されています。
getBoundingClientRectメソッド
要素の絶対座標値（位置）を取得するには、element.getBoundingClientRect() メソッドを使用します。このメソッドは、要素のサイズと位置に関する情報を返します。取得可能な位置は、ウィンドウの表示領域の左上からの座標です。
戻り値
getBoundingClientRect() メソッドは、以下のプロパティを持つオブジェクトを返します。
| プロパティ | 説明 |
|---|---|
x |
要素の左端からビューポートの左端までの距離 (px) |
y |
要素の上端からビューポートの上端までの距離 (px) |
top |
要素の上端からビューポートの上端までの距離 (px) |
right |
要素の右端からビューポートの左端までの距離 (px) |
bottom |
要素の下端からビューポートの上端までの距離 (px) |
left |
要素の左端からビューポートの左端までの距離 (px) |
width |
要素の幅 (px) |
height |
要素の高さ (px) |
使用例
以下のHTMLコードとJavaScriptコードは、ボタンをクリックすると、指定した要素の位置情報を取得して表示する例です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>要素の位置取得</title>
</head>
<body>
<div id="target" style="width: 100px; height: 100px; background-color: lightblue;"></div>
<button id="getPosition">位置を取得</button>
<script>
const targetElement = document.getElementById('target');
const getPositionButton = document.getElementById('getPosition');
getPositionButton.addEventListener('click', () => {
const position = targetElement.getBoundingClientRect();
console.log(position);
alert(`
x: ${position.x}
y: ${position.y}
top: ${position.top}
right: ${position.right}
bottom: ${position.bottom}
left: ${position.left}
width: ${position.width}
height: ${position.height}
`);
});
</script>
</body>
</html>
注意点
getBoundingClientRect()メソッドは、要素の現在の位置を取得します。そのため、スクロールや要素の動的な変更によって位置が変わる可能性があります。- 取得される座標は、ビューポート（ブラウザウィンドウの表示領域）からの相対位置です。ドキュメント全体における絶対位置を取得したい場合は、スクロール位置も考慮する必要があります。
参考資料
よくある質問
Q1. 取得した位置情報を使って、要素を他の要素にぴったりと重ねるにはどうすればよいですか？
A1. 取得した位置情報を使って要素の位置を設定するには、element.style.left や element.style.top プロパティを使用します。ただし、要素の表示位置は、positionプロパティの値によって異なるため、注意が必要です。重ねたい要素のpositionプロパティに合わせて調整する必要があります。
Q2. スクロール位置を考慮して、ドキュメント全体における要素の絶対位置を取得するにはどうすればよいですか？
A2. window.pageYOffset (垂直スクロール量) と window.pageXOffset (水平スクロール量) を取得し、getBoundingClientRect() メソッドで取得した位置情報に加算することで、ドキュメント全体における絶対位置を計算できます。
Q3. getBoundingClientRect() メソッドは、どのブラウザでサポートされていますか？
A3. getBoundingClientRect() メソッドは、主要なブラウザで広くサポートされています。ただし、古いブラウザの中にはサポートされていないものもあるため、注意が必要です。クロスブラウザに対応する必要がある場合は、caniuse.comなどのウェブサイトでブラウザのサポート状況を確認することをお勧めします。
その他の参考記事:JavaScript ウィンドウの位置