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

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

関連記事

[JavaScript] KeyUpイベントを取得する(onKeyUp)

JavaScriptでkeyupイベントを取得するサンプルです。 keyUpとは、押し下げたボタンを離した時に発生するイ ...

[JavaScript] 要素にclassを追加・削除する(classList)

JavaScriptで、要素にclassを追加・削除するサンプルです。 サンプルソース 例)要素にclassを追加・削除 ...

[JavaScript] cookieから値を取得する

cookieから値を取得するサンプルです。 cookieから値を取得するサンプル cookieから値を取得するには、例1 ...

[JavaScript] ひらがなチェックを行う

JavaScriptでひらがなチェックを行うサンプルFunctionです。 ひらがなチェックを行う 例)値がひらがなの場 ...

[JavaScript] Ajaxの戻りステータスがエラーとなる場合の原因

Ajaxの戻りステータスがエラーとなる場合の原因をまとめてみました。 Ajaxの戻りステータスがエラーとなる場合の原因 ...

スポンサーリンク