jQuery逆引きリファレンス
要素の表示位置を取得／設定するには？（offset）
offsetメソッドを使って、要素の「ドキュメント上の相対位置」を取得／設定する基本的な方法を説明する。
要素のドキュメント上の表示位置を取得／設定するには、offsetメソッドを利用します（ただし、不可視の要素に対しては動作しません）。なお、類似のメソッドにpositionメソッドがありますが、これは現在の要素の親要素からの相対位置を取得するためのもので、機能が異なります（次回のTIPSで詳しく説明します）。
要素の表示位置を取得する
まずは、位置情報を取得する方法からです。以下は、指定された要素（＝<div id="child">要素）の位置情報を表示するサンプルです。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
<style>
body{
margin:0;
}
#main{
position:relative;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: Gray;
}
#child{
position:relative;
width: 50px;
height: 50px;
top:100px;
left: 100px;
background-color: Yellow;
}
</style>
</head>
<body>
<div id="main">
<div id="child"></div>
</div>
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
$(function () {
var off = $('#child').offset();
console.log('top: ' + off.top);
console.log('left: ' + off.left);
});
</script>
</body>
</html>
|
offsetメソッドの戻り値は、top（垂直位置）／left（水平位置）というプロパティを持ったオブジェクトです。
この例であれば、親要素（＝<div id="main">要素）が(10, 10)（単位はpx。以下同様）の位置に、子要素（＝<div id="child">）が相対位置で(100, 100)でレイアウトされていますので、ドキュメント上の位置としては(110, 110)になっていることが確認できます。
要素の表示位置を設定する
offsetメソッドに対して、top／leftプロパティを持ったオブジェクトを渡すことで、要素の位置を設定することもできます。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
<style>
body{
margin:0;
}
#main {
position: absolute;
top: 10px;
left: 10px;
width: 50px;
height: 50px;
background-color: Yellow;
text-align: center;
}
</style>
</head>
<body>
<div id="main"></div>
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
$(function () {
$('#main').offset({ top: 30, left: 30 });
});
</script>
</body>
</html>
|
引数には、関数を引き渡すこともできます。例えば以下では、上のコードを修正して、最初の要素位置から垂直／水平位置に30pxずつ移動するようにしてみます。
|
// 初期位置から30×30だけ移動
$(function () {
$('#main').offset(function(index, coords) {
return {
top: coords.top + 30,
left: coords.top + 30
};
});
});
|
offsetメソッドの引数として関数を指定する場合には、以下の条件を満たしている必要があります。
- 引数として「要素のインデックス番号」「要素の位置座標」を受け取ること
- 戻り値して、設定後の位置座標（＝
top／leftプロパティを持つオブジェクト）を返すこと
ここでは、引数coords経由で取得した位置座標に30を加算したものを、戻り値として返しています。
API：.offset() カテゴリ：CSS｜Offset（オフセット）｜Manipulation（操作） > Style Properties（スタイルプロパティ）
※以下では、本稿の前後を合わせて5回分（第44回～第48回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
44. URLフラグメントに一致するid値を持つ要素を取得するには？ ― :targetフィルター
:targetフィルターを使って、URLフラグメントに一致するid属性値の要素を取得する方法を説明する。
45. ページのスクロール位置を設定／取得するには？（scrollTop／scrollLeft）
scrollTop／scrollLeftメソッドを使ってページスクロールの垂直位置／水平位置を設定もしくは取得するための基本的な方法を説明する。
46. 【現在、表示中】≫ 要素の表示位置を取得／設定するには？（offset）
offsetメソッドを使って、要素の「ドキュメント上の相対位置」を取得／設定する基本的な方法を説明する。
48. フォーム要素からの入力値を取得するには？（val）
valメソッドを使って、フォーム要素の値を取得する方法を説明。また、ラジオボタン／チェックボックス／リストボックス（複数選択）の場合の注意点も示す。
