자바스크립트의 일부 위치 속성 [그림]_기본지식

이 사진이면 충분합니다. 간단히 설명하겠습니다

높이를 예로 들면 너비는 동일합니다.

div.clientHeight: 보이는 창에서 여백을 제거한 후 테두리 길이.
div.offsetHeight: div.clientHeight를 기준으로 테두리와 스크롤바의 길이를 추가합니다.
div.scrollHeight: 요소 콘텐츠의 실제 높이입니다.
Top을 예로 들면 Left에도 동일하게 적용됩니다.

div.clientTop: 여백 뒤와 패딩 전의 길이 값입니다.
div.offsetTop: 요소 위쪽 테두리의 위쪽 가장자리에서 요소 offsetParent 위쪽 테두리의 내부 가장자리까지의 수직 거리입니다.
div.scrollTop: 현재 창 표시 범위 내 개체의 상단에서 개체의 상단 가장자리까지의 거리, 즉 세로 스크롤 막대가 나타날 때 스크롤 막대를 끌어당긴 거리입니다.
offsetParent에 대해서는 브라우저마다 구현 알고리즘이 다릅니다. 즉, 다양한 브라우저에서 offsetParent가 동일한 공통 레이아웃이 있습니다. 즉, 외부 요소 div의 계산된 위치 값이 상대적이거나 절대적인 경우 내부 레이어는 요소 div의 offsetParent는 항상 외부 요소 div입니다.