Ιδιότητα clientWidth

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

Σύνταξη

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

Παράδειγμα

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

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

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

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

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

javascript130

Παράδειγμα

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

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

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

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

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

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

Παράδειγμα

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

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

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

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

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

javascript0

Δείτε επίσης