Свойство clientHeight

Свойство 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

Смотрите также

свойство clientWidth,
которое содержит ширину элемента внутри границ