offsetメソッド

offsetメソッドは、親要素のオフセットに対する座標を取得する positionメソッドとは異なり、ドキュメントに対する要素の位置を取得することができます。 offsetメソッドは、既存の要素の上に新しい要素を配置するなどのグローバルな操作、例えばdrag-and-drop（ドラッグ＆ドロップ）の実装により有用です。このメソッドは、topとleftプロパティを含むオブジェクトを返します。ユーザーがページのサイズを変更すると計算に誤差が生じる可能性があります。また、このメソッドは非表示要素の座標を取得しません。

構文

現在の座標を取得します。状況によっては取得される値が小数になることがあります：

$(セレクター).offset();

要素の座標を変更するには、topとleftプロパティを含むオブジェクトを渡します：

$(セレクター).offset({top: 40, left: 40});

また、セット内の各要素に指定された関数を適用することができます。この場合、関数の最初のパラメーターはセット内の要素のインデックスを受け取り、 2番目のパラメーターはtopとleftの座標を含むオブジェクトを受け取ります。関数内のthisは現在の要素を指します。要素の座標値は、関数が返す値に変更されます：

$(セレクター).width(function(セット内のインデックス, {現在の座標}));

例

offsetメソッドを使ってdiv（緑色の正方形）の位置を取得し、取得したオブジェクトのキーにアクセスしてこの情報を出力してみましょう：

<div id="result">四角をクリック...</div>
<div id="test"></div>

#test {
	position: absolute;
	top: 40px;
	left: 40px;
	width: 100px;
	height: 100px;
	background: green;
	color: white;
	margin-top: 10px;
	cursor: pointer;
}

$('*', document.body).click(function(event) {
	let offset = $(this).offset();
	
	event.stopPropagation();
	$('#result').text('Left: ' + offset.left + ', Top: ' + offset.top);
});

例

2番目の段落の座標を変更してみましょう：

<p style="margin-left: 10px;">テキスト1</p>
<p style="margin-left: 10px;">テキスト2</p>

$('p').last().offset({top: 40, left: 60});

offsetメソッド

構文

例

例

関連項目