Свойство clientHeight

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

Синтаксис

элемент.clientHeight;

Пример

Давайте найдем размер элемента:

#elem { width: 100px; height: 100px; border: 1px solid black; padding: 15px; } <div id="elem"></div> let elem = document.querySelector('#elem'); console.log(elem.clientHeight);

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

130

Пример

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

<div id="elem">У этого элемента есть прокрутка.</div> #elem { width: 100px; height: 100px; border: 1px solid black; padding: 15px; overflow: scroll; } let elem = document.querySelector('#elem'); console.log(elem.clientHeight);

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

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

Пример

Если элемент скрытый, то clientHeight будет равен 0:

<div id="elem"></div> #elem { width: 100px; height: 100px; border: 1px solid black; display: none; /* скрытый элемент */ } let elem = document.querySelector('#elem'); console.log(elem.clientHeight);

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

0

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

  • свойство clientWidth,
    которое содержит ширину элемента внутри границ
  • метод getComputedStyle,
    который получает значение CSS свойства элемента
enru