getBoundingClientRect

width と height 以外のプロパティは、ビューポートの左上を基準としています。

出典:Element.getBoundingClientRect() – Web API | MDN

返値は、要素に対しての getClientRects() が返す矩形の集合である DOMRect オブジェクトです。つまり、要素に関連付けられている CSS の境界ボックスのことです。結果は境界ボックス全体を表す読み取り専用の left, top, right, bottom, x, y, width, height の各プロパティを持つ、要素全体を含む最小の矩形です。 width と height 以外のプロパティは、ビューポートの左上を基準としています。

javascript – Googleクロムでは、getBoundingClientRect()。xは未定義

出典:javascript – Googleクロムでは、getBoundingClientRect()。xは未定義 – コードログ

getBoundingClientRect()によって返されるオブジェクトは、一部のブラウザではxプロパティとyプロパティを持つことがありますが、すべてではありません。それは常にleft、top、right、およびbottomプロパティを持ちます。

どのブラウザが実際に実装しているのか知りたい場合は、W3Cの仕様の代わりにMDN docsを使用することをお勧めします。この機能に関するより正確な情報についてはMDN docs for getBoundingClientRect()を参照してください。

だからあなたがする必要があるのはあなたのrect.xとrect.yをrect.leftとrect.topに変えることだけです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です