자바스크립트 clientHeight와 offsetHeight의 차이점 완벽 정리

웹 개발을 하다 보면 요소의 실제 높이를 JavaScript로 구해야 하는 경우가 자주 발생합니다. 이때 가장 많이 사용되는 속성이 바로 clientHeight와 offsetHeight입니다. 두 속성 모두 div 요소의 높이를 반환하지만, 계산에 포함되는 항목이 서로 다르기 때문에 상황에 맞게 선택하는 것이 중요합니다.

clientHeight와 offsetHeight의 차이

• clientHeight: 요소의 패딩(padding)까지 포함한 높이를 반환합니다. 단, 테두리(border)와 스크롤바(scrollbar)는 포함되지 않습니다.
• offsetHeight: 요소의 패딩(padding), 스크롤바(scrollbar), 테두리(border)까지 모두 포함한 높이를 반환합니다.

즉, 두 속성의 차이는 테두리와 수평 스크롤바의 높이입니다. 요소에 테두리나 스크롤바가 없다면 두 속성은 같은 값을 반환합니다.

포함 항목 비교표

예제 코드

예를 들어 다음과 같은 HTML 요소가 있다고 가정해 보겠습니다.

<div id="myDiv" style="height: 400px;"></div>

offsetHeight 속성을 사용하면 아래와 같이 간단히 높이를 구할 수 있습니다.

const height = document.querySelector('#myDiv').offsetHeight;
console.log(height);

실행 결과

400

알아두면 좋은 추가 정보

• 두 속성 모두 소수점을 제외한 정수(integer) 값을 반환합니다. 소수점 단위까지 정확한 크기가 필요하다면 getBoundingClientRect() 메서드를 사용하는 것이 좋습니다.
• display: none;으로 화면에서 숨겨진 요소의 경우 두 속성 모두 0을 반환합니다.
• 마진(margin)은 두 속성 어디에도 포함되지 않으므로, 요소 간 간격까지 계산해야 한다면 별도로 더해 주어야 합니다.

정리

요소의 내용 영역과 패딩만 필요하다면 clientHeight를, 테두리와 스크롤바를 포함한 요소 전체의 실제 크기가 필요하다면 offsetHeight를 사용하세요. 두 속성의 차이를 정확히 이해하고 있으면 레이아웃 계산이나 반응형 UI 구현 시 발생할 수 있는 오류를 쉽게 예방할 수 있습니다.