바닐라 JavaScript(외부 라이브러리 없이 순수 JavaScript만 사용)에서도 div 요소의 높이를 손쉽게 확인할 수 있습니다. 이때 주로 사용되는 두 가지 속성이 바로 clientHeight와 offsetHeight입니다.
clientHeight와 offsetHeight의 차이
두 속성은 비슷해 보이지만 포함하는 영역에 중요한 차이가 있습니다.
- clientHeight: 요소의 안쪽 여백(padding)까지 포함한 높이를 반환합니다. 단, 테두리(border)와 스크롤바는 제외됩니다.
- offsetHeight: 안쪽 여백(padding), 스크롤바(scrollbar), 그리고 테두리(border)까지 모두 포함한 높이를 반환합니다.
따라서 테두리나 스크롤바가 있는 요소라면 offsetHeight가 clientHeight보다 더 큰 값이 나올 수 있습니다. 화면에 실제로 차지하는 전체 높이가 필요하다면 offsetHeight, 콘텐츠와 패딩 영역만 필요하다면 clientHeight를 사용하는 것이 좋습니다.
예제 코드
예를 들어 다음과 같은 HTML이 있다고 가정해 보겠습니다.
<div id="myDiv" height="400px"></div>
이 div의 높이는 아래와 같이 querySelector와 offsetHeight를 조합하여 구할 수 있습니다.
const height = document.querySelector('#myDiv').offsetHeight;
console.log(height);실행 결과
위 코드를 실행하면 콘솔에 다음과 같은 결과가 출력됩니다.
400
이처럼 한 줄의 코드만으로도 요소의 높이를 간단하게 얻을 수 있으며, jQuery 같은 외부 라이브러리 없이 순수 JavaScript만으로 충분히 처리할 수 있습니다. 참고로 세로 방향뿐 아니라 가로 크기가 필요하다면 clientWidth 또는 offsetWidth 속성을 동일한 방식으로 활용하면 됩니다.