clientWidth Özelliği

clientWidth özelliği, bir öğenin sınırlar içindeki genişliğini padding ile birlikte, ancak border ve kaydırma çubuğu olmadan içerir.

Sözdizimi

javascriptöğe.clientWidth;

Örnek

Bir öğenin boyutunu bulalım:

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

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: 10px solid black;
  padding: 15px;
  overflow: scroll;
}

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

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

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

Örnek

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

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

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

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

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

javascript0

Ayrıca Bakınız