Својство clientHeight

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

Синтакса

javascriptelement.clientHeight;

Пример

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

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

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

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

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

javascript130

Пример

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

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

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

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

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

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

Пример

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

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

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

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

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

javascript0

Погледнете ги и