offsetWidth Özelliği

offsetWidth özelliği, bir öğenin toplam genişliğini içerir (öğenin kendi genişliğini, kenarlık genişliklerini, iç boşlukları, kaydırma çubuklarını içerir):

Sözdizimi

öğe.offsetWidth;

Örnek

Öğenin toplam boyutunu öğrenelim:

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

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

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

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

150

Örnek

Eğer öğe gizliyse, offsetWidth 0'a eşittir:

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

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

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

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

0

Ayrıca Bakınız

clientWidth özelliği,
öğenin kenarlıklar içindeki genişliğini içerir
offsetHeight özelliği,
öğenin toplam yüksekliğini içerir
getComputedStyle metodu,
öğenin CSS özelliğinin değerini alır