Ominaisuus clientHeight

Ominaisuus clientHeight sisältää elementin korkeuden rajojen sisällä yhdessä paddingin kanssa, mutta ilman borderia ja vieritystä.

Syntaksi

elementti.clientHeight;

Esimerkki

Etsitään elementin koko:

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

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

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

Koodin suorituksen tulos:

130

Esimerkki

Jos elementille ilmestyy vieritys, niin sisällön leveys pienenee vierityksen leveydellä (noin 16px - riippuu selaimesta, käyttöjärjestelmästä, laitteesta). Seuraavassa esimerkissä elementin leveys on pienempi kuin odotettiin:

<div id="elem">Tällä elementillä on vieritys.</div>

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

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

Koodin suorituksen tulos:

114 (riippuu selaimesta)

Esimerkki

Jos elementti on piilotettu, niin clientHeight on yhtä kuin 0:

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

#elem {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	display: none; /* piilotettu elementti */
}

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

Koodin suorituksen tulos:

0

Katso myös

ominaisuus clientWidth,
joka sisältää elementin leveyden rajojen sisällä
metodi getComputedStyle,
joka saa elementin CSS-ominaisuuden arvon