Свойство clientWidth содержит ширину элемента внутри границ вместе с padding, но без border и прокрутки).

См. также свойство clientHeight, которое содержит высоту элемента внутри границ.

Синтаксис

элемент.clientWidth

Примеры

Пример

Посмотрим, чему равно clientWidth:

#elem {
	width: 100px;
	border: 10px solid;
	padding: 15px;
}
<div id="elem"></div>
var elem = document.getElementById('elem');
document.write(elem.clientWidth);

Результат выполнения кода:

130

В данном примере clientWidth = padding-left + width + padding-right = 15 + 100 + 15 = 130.

Пример

Если у элемента появляется прокрутка то ширина содержимого уменьшается на ширину прокрутки (около 16px - зависит от браузера, ОС, устройства):

#elem {
	width: 100px;
	border: 10px solid;
	padding: 15px;
	height: 20px;
	overflow: auto;
}
<div id="elem">У этого элемента есть прокрутка.</div>
var elem = document.getElementById('elem');
document.write(elem.clientWidth);

Результат выполнения кода:

113

В этом случае clientWidth = padding-left + width + padding-right - scrollbar.

Пример

Если элемент скрытый, то clientWidth равно 0:

#elem {
	width: 100px;
	display: none;
}
var elem = document.getElementById('elem');
document.write(elem.clientWidth);

Результат выполнения кода:

0