jQueryオブジェクト .offset()

jQueryオブジェクトのoffsetメソッドは、jQueryオブジェクトにマッチするHTML要素のうち、最初の要素の現在の座標を返す。offsetメソッドが返す座標は、ドキュメントに対する相対位置である。親要素に対する相対値を取得したい場合はpositionメソッドを使う。offsetメソッドは戻り値として、topとleftプロパティを含むオブジェクトを返す。

座標の取得

jQueryObject.offset()

jQueryオブジェクトのoffsetメソッドで要素の座標を取得するサンプルを次に示す。

<p id="p1">offsetのサンプル</p>
<p>top = <span id="top"></span></p>
<p>left = <span id="left"></span></p>

<script>
  var o = $('#p1').offset();
  $('#top').text(o.top);
  $('#left').text(o.left);
</script>

offsetのサンプル

top =

left =

座標の設定

jQueryObject.offset(object)

object

topプロパティとleftプロパティを持つオブジェクトを指定する。

jQueryオブジェクトのoffsetメソッドで要素の座標を取得するサンプルを次に示す。

<p id="p2">座標の設定</p>
<script>
  $('#p2').offset({
    top: 100,
    left: 10
  });
</script>