タグ要素の現在位置(px)を取得する方法【offset】

タグ要素の現在位置(px)を取得する方法【offset】

jQueryのoffsetでタグ要素の現在位置を取得表示してみます。
現在位置を取得し、animate等を使って移動させる時に使えます。

取得するタグ要素(class=”iti”のCSSの記述

※必要に応じて書き換えてください。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:16px;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
  position: relative;
}
.iti{
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #cccccc;
  top: 100px;
  left: 200px;
}
</style>

現在位置を取得する要素タグのHTML記述

※現在位置を取得する要素タグ(class=”iti”)

<h1>四角グレーのdiv要素タグ(class="iti")の現在位置をpタグに表示します</h1>
<p></p>

<div class="iti"></div>

offsetで現在位置を取得し、取得位置をpタグに表示させるJavaScriptの記述

※pタグにclass=”iti”タグの現在位置を表示させます。

<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
    var iti = $(".iti");
    var offset = iti.offset();
    $("p").html( "四角グレーの場所はtop:" + offset.top + "px、left:" + offset.left+"pxです。");
  });
</script>

デモページ

タグ要素の現在位置(px)を表示するデモ

 

※流用される場合は自己責任でお願いします。
 タグ内のGoogleアナリティクスタグは流用しないで下さい。