Ominaisuus offsetWidth

Ominaisuus offsetWidth sisältää elementin koko leveyden (sisältää elementin varsinaisen leveyden, reunojen leveyden, sisäiset marginaalit, vierityspalkit):

Syntaksi

elementti.offsetWidth;

Esimerkki

Selvitetään elementin koko koko:

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

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

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

Koodin suorituksen tulos:

150

Esimerkki

Jos elementti on piilotettu, niin offsetWidth on 0:

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

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

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

Koodin suorituksen tulos:

0

Katso myös

ominaisuus clientWidth,
joka sisältää elementin leveyden reunojen sisällä
ominaisuus offsetHeight,
joka sisältää elementin koko korkeuden
metodi getComputedStyle,
joka saa elementin CSS-ominaisuuden arvon