clientHeight Özelliği

clientHeight özelliği, bir öğenin sınırlar içindeki yüksekliğini padding ile birlikte, ancak border ve kaydırma çubuğu olmadan içerir.

Sözdizimi

javascriptöğe.clientHeight;

Örnek

Bir öğenin boyutunu bulalım:

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

Kodun çalıştırılmasının sonucu:

javascript130

Örnek

Eğer öğede kaydırma çubuğu görünürse, içerik genişliği kaydırma çubuğunun genişliği kadar azalır (yaklaşık 16px - tarayıcı, işletim sistemi, cihaza bağlıdır). Aşağıdaki örnekte öğenin genişliği beklenenden daha az olacaktır:

html<div id="elem">Bu öğenin kaydırma çubuğu var.</div>

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

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

Kodun çalıştırılmasının sonucu:

javascript114 (tarayıcıya bağlıdır)

Örnek

Eğer öğe gizliyse, clientHeight 0'a eşit olacaktır:

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

css#elem {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  display: none; /* gizli öğe */
}

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

Kodun çalıştırılmasının sonucu:

javascript0

Ayrıca Bakınız