clientHeight Özelliği

clientHeight özelliği, bir öğenin sınırlar içindeki yüksekliğini padding ile birlikte, ancak border ve kaydırma çubuğu olmadan içerir.

Sözdizimi

öğe.clientHeight;

Örnek

Bir öğenin boyutunu bulalım:

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

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

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

Kodun çalıştırılmasının sonucu:

130

Örnek

Eğer öğede kaydırma çubuğu görünürse, içerik genişliği kaydırma çubuğunun genişliği kadar azalır (yaklaşık 16px - tarayıcı, işletim sistemi, cihaza bağlıdır). Aşağıdaki örnekte öğenin genişliği beklenenden daha az olacaktır:

<div id="elem">Bu öğenin kaydırma çubuğu var.</div>

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

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

Kodun çalıştırılmasının sonucu:

114 (tarayıcıya bağlıdır)

Örnek

Eğer öğe gizliyse, clientHeight 0'a eşit olacaktır:

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

#elem {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	display: none; /* gizli öğe */
}

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

Kodun çalıştırılmasının sonucu:

0

Ayrıca Bakınız

clientWidth özelliği,
bir öğenin sınırlar içindeki genişliğini içerir
getComputedStyle metodu,
bir öğenin CSS özelliğinin değerini alır