getBoundingClientRectメソッド

メソッド getBoundingClientRect は、 要素の座標オブジェクトを含みます。座標は、 スクロールを考慮しない（ウィンドウからの） ページの表示部分から計算されます。つまり、 position プロパティの値 fixed の場合と同様です。

返されるオブジェクトには、left、 top、right、bottom、width、height プロパティが含まれます。 これらのプロパティはCSSプロパティとは何の関係もないことに 注意する必要があります。これらには、 要素の対応する辺までの距離が含まれています。 left/right については表示領域の左端から、 top/bottom については上端からの距離です。

構文

javascript要素.getBoundingClientRect();

例

要素の座標を取得します：

html<div id="elem"></div>

css#elem {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

javascriptlet elem = document.querySelector('#elem');
console.log(elem.getBoundingClientRect());

関連項目