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

öğe.clientWidth;

Örnek

Bir öğenin boyutunu bulalım:

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

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

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

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

130

Ö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:

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

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

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

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

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

Örnek

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

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

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

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

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

0

Ayrıca Bakınız

clientHeight özelliği,
bir öğenin sınırlar içindeki yüksekliğini içerir
getComputedStyle metodu,
bir öğenin CSS özellik değerini alır