Свойство clientWidth

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

Синтаксис

элемент.clientWidth

Пример

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

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

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

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

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

130

Пример

Если у элемента появляется прокрутка то ширина содержимого уменьшается на ширину прокрутки (около 16px - зависит от браузера, ОС, устройства). В данном случае clientWidth = padding-left + width + padding-right - scrollbar = 15 + 100 + 15 - 16 = 114:

<div id="elem">У этого элемента есть прокрутка.</div>

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

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

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

114 (зависит от браузера)

Пример

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

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

#elem {
	width: 100px;
	height: 100px;
	border: 10px solid black;
	padding: 15px;
	display: none; /* скрытый элемент */
}

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

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

0

Смотрите также

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