offset 메서드

offset 메서드는 요소의 위치를 문서를 기준으로 가져올 수 있습니다. 이 메서드는 부모의 여백을 기준으로 좌표를 가져오는 position 메서드와 달리, offset 메서드는 문서를 기준으로 좌표를 계산합니다. offset 메서드는 기존 요소 위에 새 요소를 배치하거나 전역 조작(예: drag-and-drop 구현)에 더 유용합니다. 이 메서드는 top 및 left 속성을 포함하는 객체를 반환합니다. 사용자가 페이지 크기를 조정하면 계산 오류가 발생할 수 있습니다. 또한 이 메서드는 숨겨진 요소의 좌표를 가져올 수 없습니다.

구문

현재 좌표 가져오기. 특정 경우 가져온 값이 소수일 수 있습니다:

$(selector).offset();

요소의 좌표를 변경하려면 top 및 left 속성을 포함하는 객체를 전달해야 합니다:

$(selector).offset({top: 40, left: 40});

또한 주어진 함수를 집합의 각 요소에 적용할 수 있습니다. 이 경우 함수는 첫 번째 매개변수로 집합 내 요소의 번호를, 두 번째 매개변수로 top 및 left 좌표를 가진 객체를 받습니다. 함수 내부의 this는 현재 요소를 가리킵니다. 요소의 좌표 값은 함수가 반환하는 값으로 변경됩니다:

$(selector).width(function(index in set, {current coordinates}));

예제

offset 메서드를 사용하여 div(녹색 사각형)의 위치를 가져온 다음, 얻은 객체의 키에 접근하여 해당 정보를 출력해 봅시다:

<div id="result">사각형을 클릭하세요 ...</div>
<div id="test"></div>

#test {
	position: absolute;
	top: 40px;
	left: 40px;
	width: 100px;
	height: 100px;
	background: green;
	color: white;
	margin-top: 10px;
	cursor: pointer;
}

$('*', document.body).click(function(event) {
	let offset = $(this).offset();
	
	event.stopPropagation();
	$('#result').text('Left: ' + offset.left + ', Top: ' + offset.top);
});

예제

두 번째 단락의 좌표를 변경해 봅시다:

<p style="margin-left: 10px;">텍스트1</p>
<p style="margin-left: 10px;">텍스트2</p>

$('p').last().offset({top: 40, left: 60});

참고 항목

position 메서드,
요소의 현재 좌표를 가져올 수 있습니다.
offsetParent 메서드,
요소의 가장 가까운 위치 지정된 상위 요소를 가져올 수 있습니다.
css 메서드,
요소의 CSS 스타일을 가져오고 변경할 수 있습니다.