offset 메서드

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

구문

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

javascript$(selector).offset();

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

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

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

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

예제

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

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

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

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

예제

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

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

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

참고 항목