js の getBoundingClientRect() メソッドの詳細な説明

1. getBoundingClientRect() 分析

getBoundingClientRect() メソッドは、要素のサイズとビューポートに対する位置を返します。

文法

rectObject = object.getBoundingClientRect();

価値

rectObject.top: 要素の上端からウィンドウの上端までの距離。
rectObject.right: 要素の右側からウィンドウの左側までの距離。
rectObject.bottom: 要素の下部からウィンドウの上部までの距離。
rectObject.left: 要素の左側からウィンドウの左側までの距離。
rectObject.width: は要素自体の幅です。rectObject.height は要素自体の高さです。

クロスブラウザ互換性

ブラウザ間の互換性を高める必要がある場合は、window.scrollX と window.scrollY の代わりに window.pageXOffset と window.pageYOffset を使用してください。これらのプロパティにアクセスできないスクリプトでは、次のコードを使用できます。

// scrollXの場合
(((t = document.documentElement) || (t = document.body.parentNode))
  && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
// scrollYの場合
(((t = document.documentElement) || (t = document.body.parentNode))
  && typeof t.scrollTop == 'number' ? t : document.body).scrollTop

例

// rect は、left、top、right、bottom の 4 つのプロパティを持つ DOMRect オブジェクトです。注: DOMRect は TextRectangle または ClientRect の標準名であり、これらは同じです。
var rect = obj.getBoundingClientRect();

js の getBoundingClientRect() メソッドの詳細ケースに関するこの記事はこれで終わりです。js の getBoundingClientRect() に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。