속성 clientHeight

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

구문

javascript요소.clientHeight;

예시

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

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

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

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

코드 실행 결과:

javascript130

예시

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

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

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

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

코드 실행 결과:

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

예시

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

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

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

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

코드 실행 결과:

javascript0

함께 보기