Eienskap clientWidth

Die eienskap clientWidth bevat die wydte van 'n element binne sy grense saam met padding, maar sonder border en scroll.

Sintaksis

element.clientWidth;

Voorbeeld

Kom ons vind die grootte van 'n element:

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

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

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

Resultaat van die kode-uitvoering:

130

Voorbeeld

As 'n element scroll kry, verminder die wydte van die inhoud met die wydte van die scroll (ongeveer 16px - hang af van die blaaier, bedryfstelsel, toestel). In die volgende voorbeeld sal die element se wydte minder wees as wat verwag is:

<div id="elem">Hierdie element het scroll.</div>

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

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

Resultaat van die kode-uitvoering:

114 (hang af van die blaaier)

Voorbeeld

As 'n element versteek is, sal clientWidth gelyk wees aan 0:

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

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

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

Resultaat van die kode-uitvoering:

0

Kyk ook

die eienskap clientHeight,
wat die hoogte van 'n element binne sy grense bevat
die metode getComputedStyle,
wat die waarde van 'n CSS-eienskap van 'n element kry