[jQuery] 요소의 영역 | 요소의 위치 .offset() .position()

요소의 위치

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() 메소드	선택한 요소가 웹 페이지에 위치할 때 기준이 되는 부모 요소를 기준으로 함.

출처 : https://www.devkuma.com/docs/jquery/%EC%9A%94%EC%86%8C%EC%9D%98-%EC%9C%84%EC%B9%98-offset--position-/

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