Свойство clientWidth - получение ширины элемента на JavaScript
Свойство clientWidth содержит ширину
элемента внутри границ вместе с padding,
но без border
и прокрутки.
Синтаксис
элемент.clientWidth;
Пример
Давайте найдем размер элемента:
<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 - зависит от браузера, ОС, устройства).
В следующем примере ширина элемента будет меньше,
чем ожидалось:
<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 {
display: none; /* скрытый элемент */
width: 100px;
height: 100px;
border: 10px solid black;
padding: 15px;
}
let elem = document.querySelector('#elem');
console.log(elem.clientWidth);
Результат выполнения кода:
0
Смотрите также
-
свойство
clientHeight,
которое содержит высоту элемента внутри границ -
метод
getComputedStyle,
который получает значение CSS свойства элемента