Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

要素の表示位置を取得/設定するには?(offset)

2016年6月2日

offsetメソッドを使って、要素の「ドキュメント上の相対位置」を取得/設定する基本的な方法を説明する。

  • このエントリーをはてなブックマークに追加

 要素のドキュメント上の表示位置を取得/設定するには、offsetメソッドを利用します(ただし、不可視の要素に対しては動作しません)。なお、類似のメソッドにpositionメソッドがありますが、これは現在の要素の親要素からの相対位置を取得するためのもので、機能が異なります(次回のTIPSで詳しく説明します)。

要素の表示位置を取得する

 まずは、位置情報を取得する方法からです。以下は、指定された要素(=<div id="child">要素)の位置情報を表示するサンプルです。

HTML
<!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.html)
<div id=”child”>要素の現在位置をログに表示
<div id=”child”>要素の現在位置をログに表示

 offsetメソッドの戻り値は、top(垂直位置)/left(水平位置)というプロパティを持ったオブジェクトです。

 この例であれば、親要素(=<div id="main">要素)が(10, 10)(単位はpx。以下同様)の位置に、子要素(=<div id="child">)が相対位置で(100, 100)でレイアウトされていますので、ドキュメント上の位置としては(110, 110)になっていることが確認できます。

要素の表示位置を設定する

 offsetメソッドに対して、topleftプロパティを持ったオブジェクトを渡すことで、要素の位置を設定することもできます。

HTML
<!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>
要素の表示位置を設定するためのコード(offset_set.html)
要素が指定位置(30, 30)に配置された

 引数には、関数を引き渡すこともできます。例えば以下では、上のコードを修正して、最初の要素位置から垂直/水平位置に30pxずつ移動するようにしてみます。

JavaScript
// 初期位置から30×30だけ移動
$(function () {
  $('#main').offset(function(index, coords) {
    return {
      top: coords.top + 30,
      left:  coords.top + 30
    };
  });
});
匿名関数で動的に要素位置を変更するコード(offset_func.html)
要素がもともとの指定位置から(30, 30)移動した(元が(10, 10)なので、(40, 40)に移動)
要素がもともとの指定位置から(30, 30)移動した(元が(10, 10)なので、(40, 40)に移動)

 offsetメソッドの引数として関数を指定する場合には、以下の条件を満たしている必要があります。

  • 引数として「要素のインデックス番号」「要素の位置座標」を受け取ること
  • 戻り値して、設定後の位置座標(=topleftプロパティを持つオブジェクト)を返すこと

 ここでは、引数coords経由で取得した位置座標に30を加算したものを、戻り値として返しています。

処理対象:要素の表示位置 カテゴリ:属性
API:.offset() カテゴリ:CSS|Offset(オフセット)|Manipulation(操作) > Style Properties(スタイルプロパティ)

※以下では、本稿の前後を合わせて5回分(第44回~第48回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
44. URLフラグメントに一致するid値を持つ要素を取得するには? ― :targetフィルター

:targetフィルターを使って、URLフラグメントに一致するid属性値の要素を取得する方法を説明する。

jQuery逆引きリファレンス
45. ページのスクロール位置を設定/取得するには?(scrollTop/scrollLeft)

scrollTop/scrollLeftメソッドを使ってページスクロールの垂直位置/水平位置を設定もしくは取得するための基本的な方法を説明する。

jQuery逆引きリファレンス
46. 【現在、表示中】≫ 要素の表示位置を取得/設定するには?(offset)

offsetメソッドを使って、要素の「ドキュメント上の相対位置」を取得/設定する基本的な方法を説明する。

jQuery逆引きリファレンス
47. 親要素に対する相対的な表示位置を取得するには?(position)

positionメソッドを使って、要素の「親要素からの相対位置」を取得する基本的な方法を説明する。なお、設定はできない。

jQuery逆引きリファレンス
48. フォーム要素からの入力値を取得するには?(val)

valメソッドを使って、フォーム要素の値を取得する方法を説明。また、ラジオボタン/チェックボックス/リストボックス(複数選択)の場合の注意点も示す。

サイトからのお知らせ

Twitterでつぶやこう!