Ιδιότητα clientHeight

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

Σύνταξη

javascriptστοιχείο.clientHeight;

Παράδειγμα

Ας βρούμε το μέγεθος ενός στοιχείου:

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

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

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

Αποτέλεσμα εκτέλεσης κώδικα:

javascript130

Παράδειγμα

Εάν εμφανιστεί κύλιση στο στοιχείο, το πλάτος του περιεχομένου μειώνεται κατά το πλάτος της κύλισης (περίπου 16px - εξαρτάται από το πρόγραμμα περιήγησης, το ΛΣ, τη συσκευή). Στο επόμενο παράδειγμα, το πλάτος του στοιχείου θα είναι μικρότερο από το αναμενόμενο:

html<div id="elem">Αυτό το στοιχείο έχει κύλιση.</div>

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

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

Αποτέλεσμα εκτέλεσης κώδικα:

javascript114 (εξαρτάται από το πρόγραμμα περιήγησης)

Παράδειγμα

Εάν το στοιχείο είναι κρυφό, τότε το clientHeight θα είναι ίσο με 0:

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

css#elem {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  display: none; /* κρυφό στοιχείο */
}

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

Αποτέλεσμα εκτέλεσης κώδικα:

javascript0

Δείτε επίσης