Свойство clientHeight - получение высоты элемента на JavaScript
Свойство 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 свойства элемента