Својство clientHeight

Својство clientHeight ја содржи висината на елементот внатре во границите заедно со padding, но без border и лизгачот.

Синтакса

element.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 - зависи од прелистувачот, оперативниот систем, уредот). Во следниот пример ширината на елементот ќе биде помала од очекуваната:

<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,
кое ја содржи ширината на елементот внатре во границите
метод getComputedStyle,
кој ја добива вредноста на CSS својството на елементот