Egenskapen clientWidth

Egenskapen clientWidth inneholder bredden til et element innenfor grensene sammen med padding, men uten border og scrollefelt.

Syntaks

element.clientWidth;

Eksempel

La oss finne størrelsen på elementet:

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

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

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

Resultatet av kjøring av koden:

130

Eksempel

Hvis elementet får et scrollefelt, reduseres bredden på innholdet med bredden på scrollefeltet (omtrent 16px - avhenger av nettleser, OS, enhet). I det følgende eksemplet vil bredden på elementet være mindre enn forventet:

<div id="elem">Dette elementet har et scrollefelt.</div>

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

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

Resultatet av kjøring av koden:

114 (avhenger av nettleser)

Eksempel

Hvis elementet er skjult, vil clientWidth være lik 0:

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

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

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

Resultatet av kjøring av koden:

0

Se også

egenskapen clientHeight,
som inneholder høyden til et element innenfor grensene
metoden getComputedStyle,
som henter verdien til en CSS-egenskap for et element