JavaScript

[JavaScript] 要素の座標を取得する(.getBoundingClientRect())

投稿日:

要素の座標を取得するには、
.getBoundingClientRect() を使用します。


取得したい座標位置により以下の値を参照します。
 表示領域の上からの座標位置:.getBoundingClientRect().top
 表示領域の下からの座標位置:.getBoundingClientRect().bottom
 表示領域の左からの座標位置:.getBoundingClientRect().left
 表示領域の右からの座標位置:.getBoundingClientRect().right

サンプルソース

例)要素(id="d1")の座標位置をコンソールに表示する

(結果)
top:8 left:8 right:508 bottom:308

デフォルトのmargin値8pxが反映された結果になっています。

備考

  • .getBoundingClientRect()メソッドに対して、.top、.bottom、.left、.right の値を参照することで各座標を取得できます。
  • 取得する座標は、表示領域の左上を(0, 0) とした座標です。

スポンサーリンク

スポンサーリンク

-JavaScript
-

執筆者:


comment

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

  関連記事


スポンサーリンク