ClientWidth hossasy

clientWidth hossasy element iňini çäkleriň içinde padding bilen bilelikde, ýöne border we skroll ýok.

Gramer

element.clientWidth;

Mysal

Elementiň ölçegini tapaýalyň:

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

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

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

Kod ýerine ýetirilenden soňky netije:

130

Mysal

Eger elementde skroll peýda bolsa, onda mazmunyň iňi skroll iňine görä azalýar (takmynan 16px - brauzere, operasiýa ulgamyna, enjama bagly). Indiki mysalda element iňi gözläninden kiçi bolar:

<div id="elem">Bu elementde skroll bar.</div>

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

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

Kod ýerine ýetirilenden soňky netije:

114 (brauzere bagly)

Mysal

Eger element gizlenen bolsa, onda clientWidth 0 deň bolar:

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

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

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

Kod ýerine ýetirilenden soňky netije:

0

Şeýle-de göz aňyňyz

clientHeight hossasy,
element beýikligini çäkleriň içinde saklaýar
getComputedStyle usuly,
elementiň CSS hossasynyň bahasyny alyar