getBoundingClientRectを使用して要素のサイズと位置を取得する
序章
getBoundingClientRect
、 JavaScript DOM (ドキュメントオブジェクトモデル)の一部であり、 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
}
次の図は、値ごとに返される情報を示しています。
The x
と y
値はと同等になります left
と top
値。 このため、一部のブラウザは省略しています x
と y
そして戻るだけ left
と top
.
もう1つ注意すべき点は、 right
/bottom
を使用してポジショニングする場合のように、CSSポジショニングで慣れているものとは異なる場合があります position: absolute
.
これは、値とそれらが要素にどのように関連しているかを示す図です。
今、あなたは何を見ました getBoundingClientRect()
戻り値、同じ例を使用して、からの出力を理解しているかどうかを確認します getBoundingClientRect()
.
使用する getBoundingClientRect
アプリケーションで
使用するには getBoundingClientRect
独自のコードでは、クエリする要素を含むHTMLドキュメントが必要になります。
と呼ばれる新しいHTMLファイルを作成します boundingbox.html
テキストエディタで:
- nano boundingbox.html`
ファイルに、を含むHTMLドキュメントを作成します <div>
のタグ <body>
とともに id
の hello
“
<!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コンソールに出力します。
<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
elementは、Webページ上のサイズと位置を示します。 この情報を使用して、この要素を基準にして他の要素を配置したり、要素をアニメートしたりできます。
結論
この記事では、あなたはそれを見ました getBoundingClientRect
要素の位置に関する豊富なデータを提供します。 以来 getBoundingClientRect
ビューポートを基準にして、追加できます window.scrollY
と window.scrollX
の値 top
と left
Webページ全体に対するHTML要素の位置を取得するためのフィールド。
すべてのデスクトップおよびモバイルブラウザで確実にサポートされていますが、 x
と y
古いバージョンのInternetExplorer/EdgeおよびSafariでは不安定な値。
についてのさらに詳細な情報については getBoundingClientRect
公式仕様は、W3Cの CSSオブジェクトモデル(CSSOM)ビューモジュールから読み取ることができます。