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

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 座標に加えてください。

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

JavaScript入門