속성 clientHeight

속성 clientHeight는 padding을 포함한 요소의 경계 내부 높이를 포함하지만, border와 스크롤바는 포함하지 않습니다.

구문

요소.clientHeight;

요소의 크기를 찾아봅시다:

#elem {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	padding: 15px;
}

<div id="elem"></div>

let elem = document.querySelector('#elem');
console.log(elem.clientHeight);

코드 실행 결과:

130

요소에 스크롤바가 생기면 콘텐츠의 너비가 스크롤바의 너비만큼 줄어듭니다 (약 16px - 브라우저, OS, 장치에 따라 다름). 다음 예시에서 요소의 너비는 예상보다 작을 것입니다:

<div id="elem">이 요소에는 스크롤바가 있습니다.</div>

#elem {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	padding: 15px;
	overflow: scroll;
}

let elem = document.querySelector('#elem');
console.log(elem.clientHeight);

코드 실행 결과:

114 (브라우저에 따라 다름)

요소가 숨겨져 있으면 clientHeight는 0이 됩니다:

<div id="elem"></div>

#elem {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	display: none; /* 숨겨진 요소 */
}

let elem = document.querySelector('#elem');
console.log(elem.clientHeight);

코드 실행 결과:

0