GetBoundingClientRectを使用して要素のサイズと位置を取得する
序章
JavaScript DOM （ドキュメントオブジェクトモデル）の一部であるgetBoundingClientRectは、HTML要素のサイズと位置に関する重要なデータを提供します。
この記事では、getBoundingClientRectを使用して、要素のサイズと位置を取得します。
前提条件
このチュートリアルを完了するには、次の概念に精通している必要があります。
- JavaSCriptをHTMLに追加する方法
- DOMの要素にアクセスする方法
- JavaScriptでのオブジェクトの操作。これは、JavaScriptでのオブジェクトのアンダーステインを読むことで調べることができます。
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
}
次の図は、値ごとに返される情報を示しています。
xおよびyの値は、leftおよびtopの値と同等になります。 このため、一部のブラウザはxとyを省略し、leftとtopのみを返します。
もう1つの注意点は、right / bottomは、position: absoluteを使用したポジショニングの場合のように、CSSポジショニングで慣れているものとは異なる場合があることです。
これは、値とそれらが要素にどのように関連しているかを示す図です。
getBoundingClientRect()が何を返すかを確認したので、同じ例を使用して、getBoundingClientRect()からの出力を理解しているかどうかを確認します。
アプリケーションでのgetBoundingClientRectの使用
独自のコードでgetBoundingClientRectを使用するには、クエリする要素を含むHTMLドキュメントが必要です。
テキストエディタでboundingbox.htmlという名前の新しいHTMLファイルを作成します。
nano boundingbox.html`
このファイルで、[X104X]のidを使用して<body>に<div>タグを含むHTMLドキュメントを作成します。
boundingbox.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>useBoundingBox example</title>
</head>
<body>
<div id="hello">Hello World</div>
</body>
</html>
ページに要素ができたら、#foo要素でgetBoundingClientRectを呼び出すことができます。 終了<body>タグの下に、新しい<script>タグを追加します。 <script>タグ内で、helloのidを持つ要素をフェッチし、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をロードします。
コンソールには次の出力が表示されます。
Outputbottom: 27.199996948242188 height: 19.199996948242188 left: 8 right: 1261 top: 8 width: 1253 x: 8 y: 8
#hello要素からの出力は、Webページ上のそのサイズと位置を示します。 この情報を使用して、この要素を基準にして他の要素を配置したり、要素をアニメートしたりできます。
結論
この記事では、getBoundingClientRectが要素の位置に関する豊富なデータを提供することを確認しました。 getBoundingClientRectはビューポートを基準にしているため、window.scrollYおよびwindow.scrollXの値をtopおよびleftフィールドに追加してHTMLを取得できます。 Webページ全体に対する要素の位置。
すべてのデスクトップおよびモバイルブラウザで確実にサポートされますが、古いバージョンのInternet Explorer/EdgeおよびSafariでは不安定なxおよびyの値は除外されます。
getBoundingClientRectの詳細については、W3Cの CSSオブジェクトモデル（CSSOM）ビューモジュールの公式仕様を参照してください。
