ITコラム

jQuery

2018.11.09

jQuery【 offset 】表示位置座標の取得と設定

jQuery の offset メソッドを使用すると、HTML 要素の表示位置を座標で取得したり、設定したりすることができます。
今回は、jQuery の offset メソッドの使い方について解説いたします。

1. offset メソッド

　
offset メソッドは、引数によって 3 通りの記述方法があります。

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

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

$(セレクタ).offset( function( index, coords ) );

offset メソッドの引数の内容は、それぞれ以下の通りです。

.offset( coordinates )

coordinates
top と left プロパティを含むオブジェクトを指定

.offset( function( index, coords ) )

function( index, coords )
設定される座標を返す関数を指定 index：要素のインデックス番号 coords：変更前の位置を表すオブジェクト

▲目次へ戻る

2. offset で表示位置座標を取得

　
offset メソッドを使用して、ボックスの左上頂点の座標を取得して表示します。
紺色のボックス内をクリックしてみて下さい。

x 座標：　
y 座標：　

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#div1").on("click", function() {

    var os = $("#div1").offset();
 
    $("#spn1").text(os.left);
    $("#spn2").text(os.top);
  });
});
//-->
</script>

<div style="background-color:#CCC; padding:20px 20px 10px;">
  <div id="div1" style="background-color:navy; width:100px; height:100px;">
  </div>
  
  x 座標：<span id="spn1"></span>
  y 座標：<span id="spn2"></span>
</div>

「$("#div1").offset();」のように記述して、ボックス（id 名が div1 の div 要素）の左上の頂点の x 座標（左端からの距離）と y 座標（上端からの距離）を取得しています。
因みに、右端や下端からの距離は取得できません。

▲目次へ戻る

3. offset で表示位置座標を設定（相対位置）

　
offset メソッドを使用して、表示位置の座標を設定して移動させます。
朱色のボックス内をクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#div2").on("click", function() {

    var obj = {};
    obj.left = $("#div2").offset().left;
    obj.left += 50;
    obj.top = $("#div2").offset().top;
    obj.top += 20;

    $("#div2").offset(obj); 
  });
});
//-->
</script>

<div style="background-color:#CCC; padding:20px;">
  <div id="div2" style="background-color:#EF454A; width:100px; height:100px;">
  </div>
</div>

例えば、「$("#div2").offset({top:3000, left:200});」のように記述するとボックス（id 名が div2 の div 要素）を、左上の頂点の x 座標（左端からの距離）が 200px 、y 座標（上端からの距離）が 3000px の位置に移動させることができますが、上のサンプルでは現在の位置からの相対的な座標を設定しています。

offset で相対位置の設定

上のサンプルでは、次のように記述して現在の位置からの相対的な座標を設定しています。

    // オブジェクトobjの宣言
    var obj = {};

    // 現在位置のx座標をobjに代入
    obj.left = $("#div2").offset().left;

    // 相対位置のx座標をobjに代入
    //（右へ50px移動）
    obj.left += 50;

    // 現在位置のy座標をobjに代入
    obj.top = $("#div2").offset().top;

    // 相対位置のy座標をobjに代入
    //（下へ20px移動）
    obj.top += 20;

    // 相対位置が格納されたobjを設定
    $("#div2").offset(obj);

相対位置の設定はソースコードの記述が多少煩雑になりますが、使用するデバイスやブラウザによる位置のずれ等を回避することができます。

▲目次へ戻る