引数を設定しない場合はdocument(左上)から、jQueryオブジェクトで指定した要素の相対位置(上/左)を取得します。返値はobjectオブジェクトで2つのプロパティを持っています。topはdocument上端から要素の上端までの距離、leftはdocument左端から要素の左端までの距離が代入されています。要素の位置の基準点は左図のようにボーダーの外側になります。マージンは含みません。v1.4からは引数に値を設定して要素の位置を設定できるようになりました。引数にはobjectオブジェクト(top,leftの2つのプロパティ)を利用するかfunctionを設定します。解説documentからの相対位置を取得しますサンプル(offset/01.html)を開いてbody内にdiv要素が1つあることを確認してください。css設定ではbody要素のマージンが0に設定され、div要素のマージンは10pxに設定されています。div要素はdocumentから10pxのマージンで表示されます。#333;background-color:#ddd;}jQueryは以下の様に記述され、buttonをクリックするとdiv要素のdocumentからの相対位置を取得します。offsetメソッドで得られる値はobjectオブジェクトなので、アラートで表示する前にtopプロパティとleftプロパティの値を取得しておきます。top:10」と表示されます。offset/01.htmlでは取得される値がobjectオブジェクトであることを意識するように、返値「ans」に対してleftプロパティやtopプロパティを使いました。サンプル(offset/01b.html)のように連結して取得することもできます。$("div").offset().top;alert(test);})buttonをクリックすると、div要素のy座標(documentの座標系)である10がアラートで表示されます。documentからの相対位置を設定しますdocumentからの相対位置を設定するには、offsetメソッドの引数にobjectオブジェクトを設定しなければなりません。cssプロパティにあわせて、y座標のプロパティ名は「top」、x座標のプロパティ名は「left」となっています。サンプル(offset/02.html)を開いてbody内の構成がoffset/01.htmlと同じことを確認してください。jQueryは以下の様に記述され、buttonをクリックするとoffsetメソッドの引数にmyObjを設定します。$("button").click(function(){$("div").offset(myObj);})変数myObjは以下の様に記述され、leftプロパティに100、topプロパティに100の値をもつobjectオブジェクトとなっています。left:100)の位置に移動します。X座標のみ、又はY座標のみにしか移動しない場合はプロパティの設定を省略できます。横方向にしか移動しないのであれば、サンプル(offset/02b.html)のようにmyObjでtopプロパティの設定を省略します。100;引数にFunctionを設定サンプル(offset/03.html)を開いてbody内にdiv要素が5つあることを確認して下さい。jQueryは以下の様に記述されoffsetメソッドの引数にfunctionの「offsetFunc」が設定されています。$("button").click(function(){$("div").offset(offsetFunc);})offsetメソッドの引数に設定するFunctionは以下の様な構文になっています。引数(インデックス番号,現在の位置「objectオブジェクト」)を受け取ります。これらの引数の値は{}内の処理で利用することができます。任意の処理の後で最終的に移動したい位置(Objectオブジェクト)をreturnで返すようにします。位置(Objectオブジェクト);}サンプルoffset/03.htmlで利用したoffsetFuncは以下の様になっており、index番号に100かけた位置(X座標)に移動します。Y座標には移動しないのでtopプロパティの設定はしていません。positionメソッドを利用します(値の設定はできません)。メモ相対的に動かしてみた特別な構文とかではないのですが、相対的に移動させるサンプルを作成しました。サンプル(offset/test01.html)を開いてbody内にdiv要素が1つあることを確認してください。jQueryは、まず以下の部分を確認してください。あとでoffsetメソッドに引数として設定するobjectオブジェクト「myObj」を1行目で作成しています。2行目ではoffsetメソッドを利用して現在の左からの位置(leftプロパティ)を取得し、1行目で作成したmyObjのleftプロパティの値として設定しました。$("div").offset().left;続いて以下の部分では、buttonがクリックされる度に上記で作成したmyObjのleftプロパティの値に10足していきます。3行目でoffsetメソッドの引数としてmyObjを設定することで10右に移動した場所に移動します。10;$("div").offset(myObj);})offset/test01.htmlでは仕組みを分かりやすくするため、objectオブジェクト「myObj」を作成しましたが。引数に直接objectオブジェクトを利用することで短く書くこともできます。サンプル(offset/test01b.html)では以下の様に引数にobjectオブジェクト(leftプロパティのみ)を直接設定しています。+=10});})buttonをクリックすると、offset/test01.htmlと同様に右に移動します。配列はやっぱり使えないjQueryは本家のページに紹介されていなくても機能が隠されている場合があるので、objectオブジェクトの代わりに配列が利用できないか試してみたのですが...やはりダメでした。サンプル(offset/test02.html)では以下の様に引数に配列を設定したのですがbuttonをクリックしても機能しませんでした。