Свойство clientWidth в JavaScript

Свойство 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