jQuery 입문 | 요소의 영역 | 요소의 위치 .offset() .position()

Tags:

요소의 위치

jQuery는 선택한 요소의 위치를 손쉽게 반환하고 설정 할 수 있는 메소드를 제공한다.

메소드 설명
.offset() 선택한 요소 집합의 첫 번째 요소의 위치를 HTML 문서를 기준으로 반환하거나, 선택한 요소의 위치를 인수로 전달받은 값으로 설정한다.
.position() 선택한 요소 집합의 첫 번째 요소의 위치를 해당 요소가 웹 페이지에 위치할 때 기준이 되었던 부모 요소를 기준으로 하는 상대 위치를 반환한다.

.offset() 메소드

.offset() 메소드는 HTML 문서(document)를 기준으로 선택한 요소의 오프셋 좌표를 반환하거나 설정한다.

아래 예제는 선택한 요소의 위치를 반환하는 예제이다.

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

코드 실행

아래 예제는 선택한 요소의 위치를 설정하는 예제이다.

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

코드 실행

.position() 메소드

.position() 메소드는 .offset() 메소드와는 달리, 선택한 요소가 웹 페이지에 위치할 때 기준이 되었던 부모 요소(offset parent)를 기준으로 하는 상대 위치를 반환한다.

아래 예제는 .position() 메소드와 .offset()를 한번에 위치를 반환하여 표시해 주는 예제이다.

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

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

코드 실행

.offset() 메소드와 .position() 메소드의 차이점

.offset() 메소드와 .position() 메소드의 차이점은 다음과 같다.

메소드명 설명
.offset() 메소드 HTML 문서(HTML document)를 기준으로 함.
.position() 메소드 선택한 요소가 웹 페이지에 위치할 때 기준이 되는 부모 요소를 기준으로 함.



최종 수정 : 2021-08-27