JavaScript를 사용하여 요소의 위치 가져오기

1. Element.getBoundingClientRect() 함수를 사용하여 JavaScript에서 요소의 위치 가져오기
2. offsetTop 속성을 사용하여 JavaScript에서 요소의 위치 가져오기

HTML 문서의 모든 요소는 지정된 위치에 배치됩니다. 여기서 위치는 요소의 x 및 y 좌표를 나타냅니다.

이 자습서에서는 JavaScript에서 HTML 요소의 위치를 ​​얻습니다.

Element.getBoundingClientRect() 함수를 사용하여 JavaScript에서 요소의 위치 가져오기

getBoundingClientRect() 함수는 뷰포트에서 요소의 크기와 위치에 대한 정보를 포함하는 DOMRect 객체를 생성합니다.

반환된 DOMRect 개체에는 패딩과 테두리 너비를 포함하는 전체 요소가 있는 작은 사각형이 포함됩니다.

left, top, right, bottom, x, y, width 및 height와 같은 속성은 전체 사각형의 위치를 정의하는 데 사용되며 크기도 픽셀 단위로 지정됩니다. 얻은 값은 너비와 높이를 제외하고 뷰포트의 왼쪽 위 모서리를 기준으로 합니다.

예를 들어,

let elem = document.querySelector('div');
let rect = elem.getBoundingClientRect();
console.log('x: ' + rect.x);
console.log('y: ' + rect.y);

offsetTop 속성을 사용하여 JavaScript에서 요소의 위치 가져오기

offsetParent 요소의 상단에 상대적인 상단 위치를 반환합니다. 이 좌표를 반환하는 함수를 만들 수 있습니다.

예를 들어,

function getOffset(el) {
  var _x = 0;
  var _y = 0;
  while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
    _x += el.offsetLeft - el.scrollLeft;
    _y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }
  return {top: _y, left: _x};
}
var x = getOffset(document.getElementById('div')).left;
var y = getOffset(document.getElementById('div')).top;
console.log('x: ' + x);
console.log('y: ' + y);