Својството clientWidth

Својството clientWidth ја содржи ширината на елементот внатре во границите заедно со padding, но без border и лизгач.

Синтакса

елемент.clientWidth;

Пример

Ајде да ја најдеме големината на елементот:

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

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

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

Резултат од извршување на кодот:

130

Пример

Ако на елементот се појави лизгач, тогаш ширината на содржината се намалува за ширината на лизгачот (околу 16px - зависи од прелистувачот, оперативниот систем, уредот). Во следниот пример ширината на елементот ќе биде помала од очекуваното:

<div id="elem">Овој елемент има лизгач.</div>

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

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

Резултат од извршување на кодот:

114 (зависи од прелистувачот)

Пример

Ако елементот е скриен, тогаш clientWidth ќе биде еднакво на 0:

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

#elem {
	display: none; /* скриен елемент */
	width: 100px;
	height: 100px;
	border: 10px solid black;
	padding: 15px;
}

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

Резултат од извршување на кодот:

0

Погледнете ги исто така

својство clientHeight,
кое ја содржи висината на елементот внатре во границите
метод getComputedStyle,
кој ја добива вредноста на CSS својството на елементот