HTML DOM Element getBoundingClientRect() メソッド

定義と用法

getBoundingClientRect() メソッドは、要素のサイズと視口に対する位置を返します。

getBoundingClientRect() メソッドは、8つの属性を持つ DOMRect オブジェクトを返します：

  • left
  • top
  • right
  • bottom
  • x
  • y
  • width
  • height

ヒント：スクロールが完了した場合も含まれます。これは、スクロール位置が変更されるたびに、矩形のエッジ（top、left、bottom、right）の値が変更されることを意味します。

例

要素のサイズと視口に対する位置を返します：

const rect = element.getBoundingClientRect();

実際に試してみてください

文法

element.getBoundingClientRect()

返り値

タイプ 説明
オブジェクト

DOMRect オブジェクトには8つの属性があります：

  • left
  • top
  • right
  • bottom
  • x
  • y
  • width
  • height

ブラウザのサポート

すべてのブラウザがサポートしています element.getBoundingClientRect()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート 9-11 サポート サポート サポート サポート