jQuery入門 | 要素の領域 | 要素の位置 .offset() .position()

Tags:

要素の位置

jQueryには、選択した要素の位置を簡単に取得したり設定したりできるメソッドが用意されている。

メソッド 説明
.offset() 選択した要素集合の最初の要素の位置をHTML文書を基準として返す。または、選択した要素の位置を引数で渡された値に設定する。
.position() 選択した要素集合の最初の要素の位置を、その要素がWebページ上に配置されるときの基準になった親要素を基準とする相対位置として返す。

.offset()メソッド

.offset()メソッドは、HTML文書を基準として選択した要素のオフセット座標を返すか設定する。

次の例は、選択した要素の位置を返す例である。

$("button").on("click", function(){
    var p = $("p:first").offset();
    $("span").text("top: " + p.top + "px, left: " + p.left + "px");
});

コードを実行

次の例は、選択した要素の位置を設定する例である。

$("button").on("click", function(){
    $("p").offset({ top: 200, left: 10 });
    var p = $("p:first").offset();
    $("span").text("top: " + p.top + "px, left: " + p.left + "px");
});

コードを実行

.position()メソッド

.position()メソッドは.offset()メソッドとは異なり、選択した要素がWebページ上に配置されるときの基準になった親要素、つまりoffset parentを基準とする相対位置を返す。

次の例は、.position()メソッドと.offset()を同時に取得して表示する例である。

$("button").on("click", function(){
    var p = $("p").position();
    $("#position").text("position - top: " + p.top + "px, left: " + p.left + "px");

    var o = $("p").offset();
    $("#offset").text("offset - top: " + o.top + "px, left: " + o.left + "px");
});

コードを実行

.offset()メソッドと.position()メソッドの違い

.offset()メソッドと.position()メソッドの違いは次の通りである。

メソッド名 説明
.offset()メソッド HTML文書を基準にする。
.position()メソッド 選択した要素がWebページ上に配置されるときの基準になる親要素を基準にする。