getBoundingClientRect 메서드

getBoundingClientRect 메서드는 요소의 좌표 객체를 포함합니다. 좌표는 스크롤을 고려하지 않고 페이지의 보이는 부분을 기준으로 계산됩니다(창 기준). 즉, position 속성의 fixed 값과 같습니다.

반환된 객체는 다음 속성을 포함합니다: left, top, right, bottom, width, height. 이러한 속성은 CSS 속성과 아무런 관련이 없다는 점에 유의해야 합니다. 여기에는 요소의 해당 측면까지의 거리가 포함됩니다. left/right의 경우 - 보이는 페이지 영역의 왼쪽 가장자리로부터의 거리이고, top/bottom의 경우 - 위쪽 가장자리로부터의 거리입니다.

문법

javascript요소.getBoundingClientRect();

예제

요소의 좌표를 얻어봅시다:

html<div id="elem"></div>

css#elem {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

javascriptlet elem = document.querySelector('#elem');
console.log(elem.getBoundingClientRect());

함께 보기