デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.offset( )documentからの相対位置を取得/設定

構文

documentからの相対位置を取得返値:objectオブジェクト
jQo.offset( )ver1.2〜
documentからの相対位置を設定返値:jQueryオブジェクト
jQo.offset( object )ver1.4〜
jQo.offset( function )ver1.4〜

機能

引数を設定しない場合は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のマージンで表示されます。

<div></div>
body{
	margin:0;
}
div{
	width:50px;
	height:50px;
	margin:10px;
	padding:10px;
	border:3px solid #333;
	background-color:#ddd;
}

jQueryは以下の様に記述され、buttonをクリックするとdiv要素のdocumentからの相対位置を取得します。offsetメソッドで得られる値はobjectオブジェクトなので、アラートで表示する前にtopプロパティとleftプロパティの値を取得しておきます。

$("button").click(function(){
	var ans = $("div").offset();
	var myLeft = ans.left;
	var myTop = ans.top;
	alert("left:"+ myLeft +"  top:"+myTop);
})

結果として、buttonをクリックするとアラートで「left:10 top:10」と表示されます。

offset/01.htmlでは取得される値がobjectオブジェクトであることを意識するように、返値「ans」に対してleftプロパティやtopプロパティを使いました。しかしサンプル(offset/01b.html)のように連結して取得することもできます。

$("button").click(function(){
	var test = $("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オブジェクトとなっています。

var myObj = new Object();
myObj.left = 100;
myObj.top = 100;

結果として、buttonをクリックするとdocumentからの相対位置(top:100, left:100)の位置に移動します。

X座標のみ、又はY座標のみにしか移動しない場合はプロパティの設定を省略できます。例えば横方向にしか移動しないのであれば、サンプル(offset/02b.html)のようにmyObjでtopプロパティの設定を省略します。

var myObj = new Object();
myObj.left = 100;

引数にFunctionを設定

サンプル(offset/03.html)を開いてbody内にdiv要素が5つあることを確認して下さい。jQueryは以下の様に記述されoffsetメソッドの引数にfunctionの「offsetFunc」が設定されています。

$("button").click(function(){
	$("div").offset(offsetFunc);
})

offsetメソッドの引数に設定するFunctionは以下の様な構文になっています。まず引数(インデックス番号,現在の位置「objectオブジェクト」)を受け取ります。これらの引数の値は{}内の処理で利用することができます。そして任意の処理の後で最終的に移動したい位置(Objectオブジェクト)をreturnで返すようにします。

wrapに設定するFunctionの構文
function 任意の名前(インデックス番号, 現在の位置){
 任意の処理(引数を利用可能)
 return 位置(Objectオブジェクト);
}

サンプルoffset/03.htmlで利用したoffsetFuncは以下の様になっており、index番号に100かけた位置(X座標)に移動します。Y座標には移動しないのでtopプロパティの設定はしていません。

function offsetFunc(index,obj){
	var myObj = new Object();
	myObj.left = 100 * index;
	return myObj;
}

結果として、buttonをクリックするとdiv要素が上から順にdocumentの左端から0px, 100px, 200px, 300px, 400pxの位置に移動します。

関連項目

親要素からの相対位置を取得したい場合はpositionメソッドを利用します(値の設定はできません)。

メモ

相対的に動かしてみた

特別な構文とかではないのですが、相対的に移動させるサンプルを作成しました。
サンプル(offset/test01.html)を開いてbody内にdiv要素が1つあることを確認してください。

jQueryは、まず以下の部分を確認してください。あとでoffsetメソッドに引数として設定するobjectオブジェクト「myObj」を1行目で作成しています。2行目ではoffsetメソッドを利用して現在の左からの位置(leftプロパティ)を取得し、1行目で作成したmyObjのleftプロパティの値として設定しました。

var myObj = new Object();
myObj.left = $("div").offset().left;

続いて以下の部分では、buttonがクリックされる度に上記で作成したmyObjのleftプロパティの値に10足していきます。そして3行目でoffsetメソッドの引数としてmyObjを設定することで10右に移動した場所に移動します。

$("button").click(function(){
	myObj.left += 10;
	$("div").offset(myObj);
})

offset/test01.htmlでは仕組みを分かりやすくするため、objectオブジェクト「myObj」を作成しましたが。しかし引数に直接objectオブジェクトを利用することで短く書くこともできます。
サンプル(offset/test01b.html)では以下の様に引数にobjectオブジェクト(leftプロパティのみ)を直接設定しています。

$("button").click(function(){
	$("div").offset({
		left:$("div").offset().left +=10
	});
})

buttonをクリックすると、offset/test01.htmlと同様に右に移動します。

配列はやっぱり使えない

jQueryは本家のページに紹介されていなくても機能が隠されている場合があるので、objectオブジェクトの代わりに配列が利用できないか試してみたのですが...やはりダメでした。サンプル(offset/test02.html)では以下の様に引数に配列を設定したのですがbuttonをクリックしても機能しませんでした。

$("button").click(function(){
	$("div").offset([100,100]);
})