見出し画像

【JavaScript】getBoundingClientRect()って、なに？🤔

gorojy

getBoundingClientRect()って、なに？🤔

`getBoundingClientRect()`は、JavaScriptで使用されるDOM要素のメソッドの一つです。このメソッドは、要素のサイズとビューポートに対する位置を取得するために用いられます。具体的には、要素の幅、高さ、およびビューポート（ブラウザの表示領域）の左上角を基点とした要素の位置（上、右、下、左）を含むDOMRectオブジェクトを返します。

`getBoundingClientRect()`によって返される値は、ピクセル単位で、要素のレイアウトが完了した状態（CSSの変形などを含む）を基に計算されます。これにより、要素の正確な表示位置やサイズをプログラムから容易に取得でき、マウスイベントの処理、要素の配置調整、可視範囲内での要素の検出など、さまざまな用途に利用可能です。

使用例

<div id="myElement" style="width: 100px; height: 50px;">テスト要素</div>
var element = document.getElementById('myElement');
var rect = element.getBoundingClientRect();

console.log('要素の幅:', rect.width);
console.log('要素の高さ:', rect.height);
console.log('要素の上端からの距離:', rect.top);
console.log('要素の左端からの距離:', rect.left);
console.log('要素の下端からの距離:', rect.bottom);
console.log('要素の右端からの距離:', rect.right);

この例では、`getBoundingClientRect()`を使用して`#myElement`のサイズと位置を取得し、コンソールに出力しています。

注意点

  • `getBoundingClientRect()`は、ビューポートに対する相対位置を返します。したがって、ページをスクロールすると、同じ要素に対してこのメソッドが返す`top`や`left`の値は変化します。

  • 返される`DOMRect`オブジェクトは読み取り専用です。したがって、これらの値を直接変更することはできません。

ほかにも、rect.xやrect.yの値もあるよね？　んで、rect.xの値は、rect.leftの値と等しくて、rect.yの値は、rect.topの値と等しいよね？　topやleftの値がスクロールによって変化するというのは、xやyの値から算出してるからよね？🤔

はい、その通りです。`getBoundingClientRect()`メソッドによって返される`DOMRect`オブジェクトは、`x`、`y`、`top`、`right`、`bottom`、`left`、`width`、`height`というプロパティを持っています。ここで、`x`と`left`、`y`と`top`の値は基本的に等しくなります。これらのプロパティは、要素のビューポート内での位置とサイズを示しています。

  • `x`、`left`：要素の左端がビューポートの左端からどれだけ離れているかを示します。

  • `y`、`top`：要素の上端がビューポートの上端からどれだけ離れているかを示します。

これらの値がスクロールによって変化するのは、`getBoundingClientRect()`がビューポートに対する要素の相対的な位置を返すからです。ページをスクロールすると、要素のビューポートにおける相対位置が変わります。そのため、`top`や`left`（同様に`x`や`y`も）の値は、スクロール位置に応じて変化します。

`width`と`height`は要素のサイズを示しており、スクロールとは無関係です。しかし、`top`、`right`、`bottom`、`left`、`x`、`y`はビューポートに対する位置を示すため、ページのスクロールによってこれらの値は変わります。

この挙動により、`getBoundingClientRect()`は、要素の現在のビューポート内での正確な位置を取得するために非常に便利なツールです。例えば、スクロールに基づいて特定の要素に対する動的なスタイル変更や、要素がビューポート内にあるかどうかの判定などに利用されます。

（自分のキャラクターの位置とかの把握で、かつて使ってたような気がするのう・・。懐かしいのう・・。🫠）

　俺も電子本で、HTML、CSS、JavaScriptの本を出版しておりますッ！　ご興味あれば、よろしくお願いいたしますッ！！

　それでは、最後まで読んでいただき、ありがとうございましたッ！！

いいなと思ったら応援しよう！

gorojy
よろしくお願いしますッ！