Ιδιότητα clientWidth

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

Σύνταξη

στοιχείο.clientWidth;

Παράδειγμα

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

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

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

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

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

130

Παράδειγμα

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

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

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

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

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

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

Παράδειγμα

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

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

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

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

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

0

Δείτε επίσης

ιδιότητα clientHeight,
που περιέχει το ύψος του στοιχείου μέσα στα σύνορα
μέθοδος getComputedStyle,
που λαμβάνει την τιμή της ιδιότητας CSS του στοιχείου