序章

getBoundingClientRect、 JavaScript DOM （ドキュメントオブジェクトモデル）の一部であり、 HTML 要素のサイズと位置。

この記事では、 getBoundingClientRect 要素のサイズと位置を取得します。

前提条件

このチュートリアルを完了するには、次の概念に精通している必要があります。

理解 getBoundingClientRect()

使用するには getBoundingClientRect、最初にHTML要素をフェッチして呼び出します getBoundingClientRect 要素について：

document.getElementById("foo").getBoundingClientRect();

getBoundingClientRect オブジェクトといくつかのキー/値のペアを返します。これにより、要素のサイズとWebページ内の位置に関する情報が得られます。

Output
{
  top: 450,
  left: 400,
  right: 825,
  bottom: 500,
  x: 400,  
  y: 450,  
  width: 425,
  height: 50
}

次の図は、値ごとに返される情報を示しています。

The x と y 値はと同等になります left と top 値。 このため、一部のブラウザは省略しています x と y そして戻るだけ left と top.

もう1つ注意すべき点は、 right/bottom を使用してポジショニングする場合のように、CSSポジショニングで慣れているものとは異なる場合があります position: absolute.

これは、値とそれらが要素にどのように関連しているかを示す図です。

今、あなたは何を見ました getBoundingClientRect() 戻り値、同じ例を使用して、からの出力を理解しているかどうかを確認します getBoundingClientRect().

使用する getBoundingClientRect アプリケーションで

使用するには getBoundingClientRect 独自のコードでは、クエリする要素を含むHTMLドキュメントが必要になります。

と呼ばれる新しいHTMLファイルを作成します boundingbox.html テキストエディタで：

  1. nano boundingbox.html`

ファイルに、を含むHTMLドキュメントを作成します <div> のタグ <body> とともに id の hello“

boundingbox.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>useBoundingBox example</title>
  </head>
  <body>
    <div id="hello">Hello World</div>
  </body>
</html>

ページに要素ができたら、呼び出すことができます getBoundingClientRect に #foo エレメント。 クロージングの下 <body> タグ、新しいを追加 <script> 鬼ごっこ。 内部 <script> タグ、要素をフェッチします id の hello と電話 getBoundingClientRect(). 結果をJavaScriptコンソールに出力します。

boundingbox.html
<body>
  <div id="hello">Hello World</div>

  <script>
  const helloElement = document.getElementById('hello');
  const results = helloElement.getBoundingClientRect();
  </script>

</body>

ファイルを保存してロードします boundingbox.html ブラウザで。

コンソールには次の出力が表示されます。

Output
bottom: 27.199996948242188
height: 19.199996948242188
left: 8
right: 1261
top: 8
width: 1253
x: 8
y: 8

からの出力 #hello elementは、Webページ上のサイズと位置を示します。 この情報を使用して、この要素を基準にして他の要素を配置したり、要素をアニメートしたりできます。

結論

この記事では、あなたはそれを見ました getBoundingClientRect 要素の位置に関する豊富なデータを提供します。 以来 getBoundingClientRect ビューポートを基準にして、追加できます window.scrollY と window.scrollX の値 top と left Webページ全体に対するHTML要素の位置を取得するためのフィールド。

すべてのデスクトップおよびモバイルブラウザで確実にサポートされていますが、 x と y 古いバージョンのInternetExplorer/EdgeおよびSafariでは不安定な値。

についてのさらに詳細な情報については getBoundingClientRect 公式仕様は、W3Cの CSSオブジェクトモデル（CSSOM）ビューモジュールから読み取ることができます。