A clientWidth tulajdonság

A clientWidth tulajdonság tartalmazza az elem szélességét a határokon belül a padding-val együtt, de a border és a görgetés nélkül.

Szintaxis

elem.clientWidth;

Példa

Keressük meg az elem méretét:

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

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

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

A kód végrehajtásának eredménye:

130

Példa

Ha az elemnél megjelenik a görgetősáv, akkor a tartalom szélessége a görgetősáv szélességével csökken (körülbelül 16px - a böngészőtől, operációs rendszertől, eszköztől függ). A következő példában az elem szélessége kisebb lesz, mint amire számítottunk:

<div id="elem">Ennek az elemnek van görgetője.</div>

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

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

A kód végrehajtásának eredménye:

114 (a böngészőtől függ)

Példa

Ha az elem rejtett, akkor a clientWidth értéke 0 lesz:

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

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

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

A kód végrehajtásának eredménye:

0

Lásd még

a clientHeight tulajdonság,
amely tartalmazza az elem magasságát a határokon belül
a getComputedStyle metódus,
amely lekéri az elem CSS tulajdonságának értékét