JavaScript を使用して要素の位置を取得する

1. JavaScript で Element.getBoundingClientRect() 関数を使用して要素の位置を取得する
2. JavaScript で offsetTop プロパティを使用して要素の位置を取得する

HTML ドキュメントのすべての要素は、特定の位置に配置されます。ここでの位置は、要素の x 座標と y 座標を指します。

このチュートリアルでは、JavaScript での HTML 要素の位置を取得します。

JavaScript で Element.getBoundingClientRect() 関数を使用して要素の位置を取得する

getBoundingClientRect() 関数は、ビューポート内の要素のサイズと位置に関する情報を含む DOMRect オブジェクトを生成します。

DOMRect オブジェクトが返されると、パディングと境界線の幅を含む要素全体を含む小さな長方形が含まれます。

left、top、right、bottom、x、y、width、height などの属性は、長方形全体の位置とピクセル単位のサイズを定義するために使用されます。得られた値は、幅と高さを除いて、ビューポートの左上隅を基準にしています。

例えば、

let elem = document.querySelector('div');
let rect = elem.getBoundingClientRect();
console.log('x: ' + rect.x);
console.log('y: ' + rect.y);

JavaScript で offsetTop プロパティを使用して要素の位置を取得する

offsetParent 要素の上部を基準にした上部の位置を返します。これらの座標を返す関数を作成できます。

例えば、

function getOffset(el) {
  var _x = 0;
  var _y = 0;
  while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
    _x += el.offsetLeft - el.scrollLeft;
    _y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }
  return {top: _y, left: _x};
}
var x = getOffset(document.getElementById('div')).left;
var y = getOffset(document.getElementById('div')).top;
console.log('x: ' + x);
console.log('y: ' + y);