мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Свойство 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,
    которое содержит высоту элемента внутри границ