要素の座標やサイズを取得する

スポンサーリンク

DOM 要素の座標や、サイズを取得した場合は、 getBoundingClientRect() メソッドを使用します。

構文

element.getBoundingClientRect() 

サンプルコード

座標・サイズを取得する要素の 「id="cat"」とします。


var elem = document.getElementById('cat');
var r = elem.getBoundingClientRect();

console.log(r.left, r.top, r.width, r.height);

座標・サイズは下表のようになります。

x 座標left
y 座標top
width
高さheight

スクロールを考慮する場合

上のサンプルでは、スクロールした場合は考慮していません。 スクロールも考慮する場合は、次のように取得します。


var elem = document.getElementById('cat');
var r = elem.getBoundingClientRect();

console.log(r.left + window.pageXOffset, r.top + window.pageYOffset);

スクロールを考慮する場合は、 「window.pageXOffset」と「window.pageYOffset」を、 それぞれ x 座標と y 座標に加えてください。

どちらを採用するかは、目的に応じて使い分けてください。

ツール・書籍紹介

まとめ・一覧

基本編

数値

文字列

正規表現

日付・時刻

配列

関数

オブジェクト指向

DOM操作

API

便利な小技集

用語

実践編

関連サイト