jQuery offset() メソッド

jQuery HTML/CSS Methods jQuery HTML/CSS Methods

<p> 要素のオフセット座標を返す:

$("button").click(function(){
  var x=$("p").offset();
  alert("Top: " + x.top + " Left: " + x.left);
});

Try it yourself »

定義と用法

offset() メソッドは、選択した要素の、ドキュメントを基準としたオフセット座標を設定または値を返します。

offset を値を返すために使用した場合:
このメソッドは、最初にマッチした要素の offset coordinates を返す。 2つの値を持つオブジェクト:top と left の位置をピクセルで。

offset を値を設定するために使用した場合:
このメソッドは、マッチした全ての要素に offset coordinates を設定する


構文

オフセット座標を返す:

$(selector).offset()

オフセット座標を設定する:

$(selector).offset({top:value,left:value})

関数を使用し、オフセット座標を設定する:

$(selector).offset(function(index,currentoffset))

パラメータ 説明
{top:value,left:value} オフセットを設定するときは必須。ピクセルで上と左の座標を指定する。

可能な値:
  • 名前/値の組、例えば {top:100,left:100}
  • top と left プロパティをもつオブジェクト (
function(index,currentoffset) 任意。上と左の座標を含むオブジェクトを返す関数を指定する
  • index - 集合内の要素のインデックス位置を返す
  • currentoffset - 選択した要素の現在の座標を返す


Examples

Try it Yourself - 例

オフセット座標を設定する
要素のオフセット座標を設定する方法。

関数を使用してオフセット座標を設定する
要素のオフセット座標を設定するために関数を使用する。

オブジェクトを使用してオフセット座標を設定する
new object を使用し、要素のオフセット座標を設定する方法。

他要素のオフセット座標を使用して、 要素のオフセット座標を設定する
既存要素のオフセット座標を使用して、要素のオフセット座標を設定する方法。


jQuery HTML/CSS Methods jQuery HTML/CSS Methods