JavaScript

jQuery offset()で要素のピクセル位置を簡単に取得する完全ガイド

  /

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

Contents

Webページ上の要素の位置を知る

Webサイトをデザインする際、特定の要素の正確な位置を知る必要があることがよくあります。例えば、ユーザーがあるアクションを起こした時に、アニメーションで要素をスムーズに動かしたいときなどです。このような場合、jQueryのoffset()メソッドを使って、簡単に要素の現在の位置（ピクセル単位）を取得できます。

jQueryのoffset()メソッドとは

offset()メソッドは、指定した要素のドキュメント上の位置を取得するために使用されます。このメソッドは、要素の上辺の位置を示すtopプロパティと左辺の位置を示すleftプロパティを持つオブジェクトを返します。

CSSの準備

まず、位置を取得したい要素に適用するCSSを準備します。
ここでは、例としてクラス名（class=”iti”）を持つ要素を動かすことを考えています。

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

HTMLの構造

次に、位置を表示したい要素と、その位置情報を表示するためのHTML構造を準備します。
現在位置を取得する要素タグ（class=”iti”）を用意します。

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

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

jQueryでの位置情報の取得と表示

最後に、jQueryを使って要素の位置を取得し、その情報をHTMLページに表示します。
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>

タグ要素の現在位置（px）を表示するデモページ

これで、特定の要素の現在位置を取得し、それをWebページ上で表示する準備が整いました。実際にこのコードを使ってみると、要素の位置を動的に知ることができ、Webページをよりインタラクティブにするための第一歩を踏み出すことができます。

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

まとめ

この記事では、jQueryのoffset()メソッドを使って、Webページ上の要素の現在位置を取得し表示する方法について解説しました。この基本的なテクニックをマスターすることで、より複雑なアニメーションやインタラクティブな要素をWebサイトに組み込むことが可能になります。プログラミングは学び続けることが大切ですので、今回学んだ知識を応用して、さらに多くのことに挑戦してみてください。

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

offset 位置取得
関連記事