Eigenschap offsetWidth

De eigenschap offsetWidth bevat de volledige breedte van een element (inclusief de werkelijke breedte van het element, randbreedtes, binnenste afstand, schuifbalken):

Syntaxis

element.offsetWidth;

Voorbeeld

Laten we de volledige grootte van een element bepalen:

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

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

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

Resultaat van de code-uitvoering:

150

Voorbeeld

Als het element verborgen is, dan is offsetWidth gelijk aan 0:

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

#elem {
	display: none; /* verborgen element */
	width: 100px;
	height: 100px;
	padding: 15px;
	border: 10px solid black;
}

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

Resultaat van de code-uitvoering:

0

Zie ook

eigenschap clientWidth,
die de breedte van het element binnen de randen bevat
eigenschap offsetHeight,
die de volledige hoogte van het element bevat
methode getComputedStyle,
die de waarde van een CSS-eigenschap van een element verkrijgt