Свойство clientHeight в JavaScript

Свойство clientHeight содержит высоту элемента внутри границ вместе с padding, но без border и прокрутки).

Синтаксис

элемент.clientHeight

Пример

В данном примере clientHeight = padding-top + height + padding-bottom = 15 + 100 + 15 = 130:

#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 - зависит от браузера, ОС, устройства). В данном случае clientHeight = padding-top + height + padding-bottom - scrollbar = 15 + 100 + 15 - 16 = 114:

<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