js_기본지식에 따른 높이와 상의 차이 비교

js에서 clientHeight(clientTop), offsetHeight(offsetTop), scrollHeight(scrollTop)을 볼 때마다 헷갈리고 차이점을 알 수 없습니다. 하지만 한두 번 접할 가치는 없습니다. 어떤 것을 사용할지 결정하려면 매번 차이점을 살펴봐야 합니다.

이 글은 주로 Chrome을 기반으로 작성되었습니다. 브라우저마다 약간의 차이가 있을 수 있지만, 그 중 상당수는 제가 접하지 못한 부분이 있어 향후 비슷한 호환성 문제가 발생하면 기록해 두겠습니다. 여기서는 나중에 쉽게 볼 수 있도록 Chrome 브라우저의 다양한 속성 간의 차이점을 기록하겠습니다.

clientHeight, offsetHeight 및 scrollHeight의 차이점

ClientHeight는 기본적으로 다양한 브라우저에서 동일하게 컨텐츠가 보이는 영역의 높이, 즉 페이지 브라우저에서 컨텐츠를 볼 수 있는 영역의 높이를 의미한다고 합의되어 있습니다. 스크롤 바와 여백은 제외됩니다. 단, 패딩을 포함하면 실제 clientHeight = 아래 그림과 같이 현재 객체의 가시 영역의 높이 패딩 값 clientHeight = 객체의 가시 영역 높이(300) 상단 및 낮은 패딩 값 ​​​​(20) = 320

다양한 브라우저에서 실용적인 자바스크립트 솔루션:

var w= document.documentElement.clientWidth || document.body.clientWidth;
var h= document.documentElement.clientHeight || document.body.clientHeight;

OffsetHeight = 현재 객체의 스크롤 바 테두리 값 패딩 값 위 그림의 현재 객체의 높이는 시각적 영역의 높이와 동일하므로 offsetHeight = 300 padding(20px) border(10px) = 330

ScrollHeight는 웹 페이지 콘텐츠의 실제 높이입니다. 최소값은 clientHeight와 같을 수 있음을 의미합니다. 그러나 다음 코드에서 볼 수 있듯이 부모 div의 높이입니다. 이때, 상위 div의 구조도는 다음과 같습니다.

상위 div의 scrollHeight는 scrollHeight = 500px 패딩 값이어야 합니다

이때 스크롤바가 생성되기 때문에 상위 div의 가시영역 높이는 283이고, 현재 객체 높이는 상위 div의 높이가 300이므로

clientHeight = 283px 패딩 값(20px) = 303px

offsetHeight = 상위 div 높이(300px) 패딩 값(20px) 테두리(10px) = 330px

<div id="parent" style="padding:10px;border:5px red solid;height:300px;width:200px;overflow:auto">
  <div style="height:500px;width:400px"></div>
</div>

clientTop, offsetTop 및 scrollTop의 차이점

clientTop을 이해하려면 clientHeight의 계산 방법을 참조하세요. clientHeight의 계산 방법은 현재 시각적 영역의 높이에 패딩 값을 더한 것입니다. 그러면 clientTop은 현재 시각적 영역에서 이전 요소까지의 거리로 이해될 수 있습니다.

위 그림과 같이 clientTop은 대부분의 경우 이 테두리 값입니다.

offsetTop은 현재 객체에서 body 요소까지의 거리입니다. 계산 방법은 상대적으로 복잡합니다. 먼저 위 그림을 통해 이해해 보겠습니다. 현재 객체는 경계선 내의 영역을 참조하므로 offsetTop 계산은 여백부터 시작됩니다. 현재 객체의 계산식은 다음과 같습니다. offsetTop = 현재 객체의 margin-top, 현재 객체의 모든 상위 요소의 margin-top, 현재 객체의 모든 상위 요소의 border-top에 유의해야 합니다. offsetTop은 직접 할당할 수 없으며 이 계산 방법을 통해서만 얻을 수 있습니다.

scrollTop은 현재 창의 표시 범위 내에서 현재 개체의 상단에서 현재 개체의 상단 가장자리까지의 거리입니다. 즉, 세로 스크롤바가 나타날 때 스크롤바를 끌어당긴 거리입니다.

위는 js의 키와 상의 차이를 비교한 것입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.