Ominaisuus clientWidth

Ominaisuus clientWidth sisältää elementin leveyden rajojen sisällä yhdessä paddingin kanssa, mutta ilman borderia ja vierityspalkkia.

Syntaksi

elementti.clientWidth;

Esimerkki

Etsitään elementin koko:

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

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

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

Koodin suorituksen tulos:

130

Esimerkki

Jos elementille ilmestyy vierityspalkki, sisällön leveys pienenee vierityspalkin leveyden verran (noin 16px - riippuu selaimesta, käyttöjärjestelmästä, laitteesta). Seuraavassa esimerkissä elementin leveys on pienempi kuin odotettiin:

<div id="elem">Tällä elementillä on vierityspalkki.</div>

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

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

Koodin suorituksen tulos:

114 (riippuu selaimesta)

Esimerkki

Jos elementti on piilotettu, clientWidth on 0:

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

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

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

Koodin suorituksen tulos:

0

Katso myös

ominaisuus clientHeight,
joka sisältää elementin korkeuden rajojen sisällä
metodi getComputedStyle,
joka hakee elementin CSS-ominaisuuden arvon