jQueryのoffset()でタグ要素の現在位置（px）を取得する方法｜DAD UNION

jQueryのoffset()を使ってタグ要素の現在位置（px）を取得表示する方法をご紹介します。
現在位置を取得し、animate等を使って移動させる時に使えます。

Contents

offset()を使ってタグ要素の現在位置（px）を取得表示するCSS記述
offset()を使ってタグ要素の現在位置（px）を取得表示するHTML記述
jQueryのoffset()でタグ要素の現在位置（px）を取得するJavaScriptの記述
タグ要素の現在位置（px）を表示するデモページ

offset()を使ってタグ要素の現在位置（px）を取得表示するCSS記述

※取得するタグ要素（class=”iti”）のCSS記述です。必要に応じて書き換えてください。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",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>

offset()を使ってタグ要素の現在位置（px）を取得表示するHTML記述

※現在位置を取得する要素タグ（class=”iti”）を用意します。必要に応じて変更して下さい。

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

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

jQueryのoffset()でタグ要素の現在位置（px）を取得するJavaScriptの記述

※jquery-2.2.0.min.jsファイルを読み込みます。offset()でclass=”iti”タグの現在位置を取得し、その取得位置をpタグに表示させます。

<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>