페이지 요소의 위치를 ​​얻기 위한 javascript getBoundingClientRect() 코드 [개정 버전] 페이지 1/2_javascript 기술

document.documentElement.getBoundingClientRect
MSDN 설명은 다음과 같습니다.
구문
oRect = object.getBoundingClientRect()반환 값
TextRectangle 개체를 반환합니다. 각 사각형에는 4개의 정수 속성(top, 왼쪽, 오른쪽, 아래쪽)은 직사각형의 좌표를 픽셀 단위로 나타냅니다.
비고
이 메소드는 직사각형을 기준으로 직사각형 합집합의 왼쪽, 위쪽, 오른쪽 및 아래쪽 좌표를 노출하는 객체를 검색합니다. Microsoft Internet Explorer 5에서 창의 왼쪽 상단은 실제 클라이언트를 기준으로 2,2(픽셀)입니다.
실용적인 설명을 위해 이 방법은 페이지의 요소 값을 가져옵니다. 왼쪽, 위쪽, 오른쪽, 아래쪽은 각각 브라우저 창을 기준으로 한 위치입니다. 이것도 이해가 쉽지 않으니 아래 사진으로 설명하겠습니다.
이 방법은 더 이상 IE 전용이 아닙니다. FF3.0 및 Opera9.5는 이미 이 방법을 지원하고 있으며 이전 버전의 Opera 및 Firefox에서는 페이지 요소의 위치를 ​​얻는 효율성이 크게 향상되었다고 할 수 있습니다. 페이지에서 요소의 절대 위치를 얻으려면 반복해야 합니다.

다음 코드는 스크롤 후의 간단한 예입니다. 스크롤 막대에서 빨간색 영역을 클릭하면 각 값의 변경 사항을 볼 수 있습니다.