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 座標に加えてください。
どちらを採用するかは、目的に応じて使い分けてください。