Ominaisuus clientHeight

Ominaisuus clientHeight sisältää elementin korkeuden rajojen sisällä yhdessä paddingin kanssa, mutta ilman borderia ja vieritystä.

Syntaksi

javascriptelementti.clientHeight;

Esimerkki

Etsitään elementin koko:

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);

Koodin suorituksen tulos:

javascript130

Esimerkki

Jos elementille ilmestyy vieritys, niin sisällön leveys pienenee vierityksen leveydellä (noin 16px - riippuu selaimesta, käyttöjärjestelmästä, laitteesta). Seuraavassa esimerkissä elementin leveys on pienempi kuin odotettiin:

html<div id="elem">Tällä elementillä on vieritys.</div>

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

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

Koodin suorituksen tulos:

javascript114 (riippuu selaimesta)

Esimerkki

Jos elementti on piilotettu, niin clientHeight on yhtä kuin 0:

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

css#elem {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  display: none; /* piilotettu elementti */
}

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

Koodin suorituksen tulos:

javascript0

Katso myös