Својството clientWidth

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

Синтакса

javascriptелемент.clientWidth;

Пример

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

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

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

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

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

javascript130

Пример

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

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

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

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

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

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

Пример

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

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

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

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

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

javascript0

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