См. интсрукция по ruweb.
ClientHeight
14.03.2026 10:55 / Марат / Смотрели : 68 / js |"ClientHeight", "что такое clientHeight", синтаксис, живой пример.
Подробно о "clientHeight".
- Что такое clientHeight
- Собираем пример clientHeight
- Пример кода clientHeight
- Живой пример clientHeight
-
Что такое clientHeight -
Собираем пример clientHeight -
Пример кода clientHeight -
Живой пример clientHeight
Свойство Element.clientHeight, доступное только для чтения, равно нулю для элементов без полей CSS или встроенного макета; в противном случае это внутренняя высота элемента в пикселях. Он включает отступы, но исключает границы, поля и горизонтальные полосы прокрутки (если таковые имеются).
Высоту клиента можно рассчитать как: CSS height + CSS padding - высота горизонтальной полосы прокрутки (если она присутствует).
Когда clientHeight используется для корневого элемента (элемента <html>) (или для <body>, если документ находится в режиме quirks mode), возвращается высота области просмотра (исключая любую полосу прокрутки). Это особый случай clientHeight.
Примечание: Это свойство округлит значение до целого числа. Если вам нужно дробное значение, используйте element.getBoundingClientRect().
Наглядная иллюстрация clientHeight
Ниже представлено изображение - где оно собственно находится это : "clientHeight"...
Для того, чтобы создать пример "clientHeight" вам понадобится:
<div id="example_clientheight">Здесь example_clientheight</div>
+ второй "div" - куда будем выводить результат полученного "clientHeight"^
<div id="here_innerhtml"></div>
Добавим нашему блоку стилей...
<style>
#example_clientheight {
width: 200px;
height: 100px;
border: 10px solid black;
padding: 15px;
}
</style>
Далее обработаем "clientHeight" и выведем результат:
Как вы наверно знаете, что если у тега есть id(в данном примере id="example_clientheight") то к нему можно обратиться напрямую..., поэтому пишем так:
example_clientheight . clientHeight
Аналогично поступаем с тегом, куда будем отправлять полученные данные "clientHeight" - используем innerHTML:
here_innerhtml . innerHTML
Соберем весь код вместе:
После того, как я попытался вам рассказать весь код примера "clientHeight" - давайте весь этот код соберем в одном месте:
Html:
<div id="example_clientheight">Здесь example_clientheight</div>
<div id="here_innerhtml"></div>
Css:
<style>
#example_clientheight {
width: 200px;
height: 100px;
border: 10px solid black;
padding: 15px;
}
</style>
javascript
<script>
here_innerhtml . innerHTML = example_clientheight . clientHeight ;
</script>
Мне осталось только и всего-то разместить выше приведенный пример "clientHeight" прямо здесь:
В данном примере clientHeight = padding-left + width + padding-right = 15 + 100 + 15 = 130:
Здесь результат clientHeight
Последнние комментарии:
