要素の位置情報(offsetとposition)

Tag:

jQueryで要素の位置情報を取得する方法について紹介します。

jQueryには、要素の位置情報を取得するメソッドとしてoffsetメソッドとpositionメソッドがあります。
offsetメソッドでは、ドキュメントの左上端を原点とした要素の位置情報を取得します。
positionメソッドでは、親要素の左上端を原点とした要素の位置情報を取得します。

下記にサンプルを示します。サンプルでは、Box1とBox2を移動できます。移動することに伴い、offsetとpositionで取得する値がどう変わるのか確認してみてください。(サンプルを参照)

要素位置取得サンプルソース
ソース
html
<h3>Box1, Box2を動かしてください</h3>
<div id="box">
    <div id="box1">
        Box1
        <div id="box2">
            Box2
        </div>
    </div>
</div>
css
#box { 
    width: 500px; 
    height:500px; 
    border:2px solid #ccc; 
    background-color: #D1F1CC;
    position: relative;
    float: left;
}
#box1 { 
    width: 280px; 
    height:280px; 
    background-color: #5EC84E;
    text-align: center;
    position: absolute;
}
#box2 { 
    width: 70px; 
    height: 70px; 
    border:5px solid #A52175; 
    background-color: #23AC0E;
    text-align: center;
    position: absolute;
}
javascript
$(function() {
    getstate();

    $("#box1").draggable({
        containment: "#box",
        scroll: false,
        drag: function(e, ui) {
            getstate();
        }
    });
    $("#box2").draggable({
        containment: "#box1",
        scroll: false,
        drag: function(e, ui) {
            getstate();
        }
    });

    function getstate() {
        $("#1_outerHeight").text(Math.round($("#box1").outerHeight()) + "px");
        $("#2_outerHeight").text(Math.round($("#box2").outerHeight()) + "px");
        $("#1_innerHeight").text(Math.round($("#box1").innerHeight()) + "px");
        $("#2_innerHeight").text(Math.round($("#box2").innerHeight()) + "px");
        
        $("#1_postop").text(Math.round($("#box1").position().top) + "px");
        $("#1_posleft").text(Math.round($("#box1").position().left) + "px");
        $("#2_postop").text(Math.round($("#box2").position().top) + "px");
        $("#2_posleft").text(Math.round($("#box2").position().left) + "px");
        
        $("#1_offtop").text(Math.round($("#box1").offset().top) + "px");
        $("#1_offleft").text(Math.round($("#box1").offset().left) + "px");
        $("#2_offtop").text(Math.round($("#box2").offset().top) + "px");
        $("#2_offleft").text(Math.round($("#box2").offset().left) + "px");
        return true;
    }
});

スポンサーリンク