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

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

.position( )親要素からの相対位置を取得

構文

親要素からの相対位置を取得返値:objectオブジェクト
jQo.position( )ver1.2〜

機能

親要素から、jQueryオブジェクトで指定した要素までの相対位置(上/左)を取得します。返値はobjectオブジェクトで2つのプロパティを持っています。topは親要素上端から要素の上端までの距離、leftは親要素の左端から要素の左端までの距離が代入されています。

要素の位置の基準点は左図のようにボーダーの外側になります。マージンは含みません。

offsetメソッドと異なり引数に値を設定して、要素を移動させることはできません。


解説

親要素からの相対位置を取得します

サンプル(position/01.html)を開いてbody内にareaのid属性を持つdiv要素内に、targetのid属性を持つdiv要素があることを確認してください。css設定でareaのid属性を持つdiv要素の位置は左から100px、上から50pxに配置されています。targetのid属性を持つdiv要素は左から100px、上から150pxに配置されています。これは相対座標(relative)なので、親要素(areaのid属性を持つdiv要素)での座標になります。

<div id="area"><div id="target"></div></div>
#target{
	position:relative;
	left:100px;
	top:150px;
	width:50px;
	height:50px;
	background-color:#09c;
}

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

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

結果として、buttonをクリックするとアラートで「left:100 top:150」と表示されます。これはcssで設定した値と同じです。

関連項目

documentからの相対位置を取得/設定したい場合はoffsetメソッドを利用します。

メモ

offsetメソッドとの比較

offsetメソッドは親要素ではなく「document座標での値」を得られます。比較のためposition/01.htmlのpositionをoffsetに変更したサンプル(position/test01.html)を用意しました。buttonをクリックするとアラートで「left:200 top:200」と表示されます。
areaの位置(top:50, left:100)足す targetの位置(top:150, left:100)で(top:200, left:200)というわけです。

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