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
Для того, чтобы создать пример "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") то к нему можно обратиться напрямую..., поэтому пишем так:
Аналогично поступаем с тегом, куда будем отправлять полученные данные "clientHeight" - используем innerHTML:
Соберем весь код вместе:
Пример кода clientHeight
После того, как я попытался вам рассказать весь код примера "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" прямо здесь:
Здесь результат clientHeight
