☰

HTML要素の位置（X,Y）を取得する 質問する

tag-icon • tag-icon javascript html css dom position
HTML要素の位置（X,Y）を取得する 質問する

JavaScript でimgやなどの HTML 要素の X 位置と Y 位置を取得する方法を知りたいです。div

ベストアンサー1

正しいアプローチはelement.getBoundingClientRect():

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

Internet Explorerは、あなたが気にするであろう限りずっとこれをサポートしており、最終的に標準化されました。CSSOM ビュー他のブラウザもこれを採用したずっと昔。

一部のブラウザでは、高さと幅のプロパティも返されますが、これは非標準です。古いブラウザとの互換性が心配な場合は、この回答の改訂版をチェックして、最適化されたデグレード実装を確認してください。

によって返される値はelement.getBoundingClientRect()ビューポートを基準とします。別の要素を基準とする必要がある場合は、1 つの四角形から他の四角形を減算するだけです。

var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

alert('Element is ' + offset + ' vertical pixels from <body>');

おすすめ記事