HTML DOM getBoundingClientRect() 메서드

getBoundingClientRect()메서드는 요소의 크기와 viewport(뷰포트)에 대한 위치를 반환합니다。

반환된 값은八个 속성을 가진 DOMRect 객체를 가지고 있습니다: left, top, right, bottom, x, y, width, height。

주의:경계 다각형을 계산할 때, 뷰포트 영역의 스크롤 양을 고려해야 합니다. 이는 스크롤 위치가 변경될 때마다 경계의 가장자리(상단, 좌측, 하단 및 우측)가 값을 변경한다는 것을 의미합니다.

문법:

element.getBoundingClientRect()

예제

var div = document.getElementById("myDiv");
var rect = div.getBoundingClientRect();

모든 브라우저가 getBoundingClientRect() 메서드를 완전히 지원합니다:

메서드
getBoundingClientRect()	예	예	예	예	예

반환 값:	여덟 개의 속성을 가진 DOMRect 객체: left, top, right, bottom, x, y, width, height
DOM 버전:	CSS 객체 모델(CSSOM)