Sifa clientWidth

Sifa clientWidth ina upana wa kipengele ndani ya mipaka pamoja na padding, lakini bila border na kitabu.

Syntax

kipengele.clientWidth;

Mfano

Wacha tupate ukubwa wa kipengele:

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

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

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

Matokeo ya utekelezaji wa kodi:

130

Mfano

Ikiwa kipengele kina kitabu basi upana wa yaliyomo hupungua kwa upana wa kitabu (takriban 16px - inategemea kivinjari, OS, kifaa). Katika mfano ufuatao upana wa kipengele utakuwa chini, kuliko ilivyotarajiwa:

<div id="elem">Kipengele hiki kina kitabu.</div>

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

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

Matokeo ya utekelezaji wa kodi:

114 (inategemea kivinjari)

Mfano

Ikiwa kipengele kimefichika, basi clientWidth itakuwa sawa na 0:

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

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

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

Matokeo ya utekelezaji wa kodi:

0

Angalia pia

sifa clientHeight,
ambayo ina urefu wa kipengele ndani ya mipaka
mbinu getComputedStyle,
ambayo inapata thamani ya sifa ya CSS ya kipengele