Ιδιότητα clientHeight

Η ιδιότητα clientHeight περιέχει το ύψος ενός στοιχείου εντός των ορίων μαζί με το padding, αλλά χωρίς το border και την κύλιση.

Σύνταξη

στοιχείο.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 ενός στοιχείου