Ιδιότητα offsetWidth

Η ιδιότητα offsetWidth περιέχει το πλήρες πλάτος του στοιχείου (περιλαμβάνει το πραγματικό πλάτος του στοιχείου, το πλάτος των συνόρων, τα εσωτερικά περιθώρια, τις γραμμές κύλισης):

Σύνταξη

στοιχείο.offsetWidth;

Παράδειγμα

Ας μάθουμε το πλήρες μέγεθος του στοιχείου:

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

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

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

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

150

Παράδειγμα

Αν το στοιχείο είναι κρυφό, τότε το offsetWidth ισούται με 0:

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

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

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

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

0

Δείτε επίσης

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