Размер высоты окна в JavaScript

высота окна - это может быть высота окна браузера, либо высота вообще монитора. Если способы определить высоту окна любого элемента с помощью javascript?

Подробно о высоте окна в javascript

1. Вывести с помощью clientHeight высоты body
2. innerHeight — внутренняя высота окна.
3. outerHeight — наружная высота окна.
4. screen.height и screen.availHeight - высота экрана

Вывести с помощью clientHeight высоты body

Предположим, что нам требуется найти текущую высоты окна, которое занимает тег "body"

Для этого мы можем воспользоваться свойством:

clientHeight

Для "body" эта конструкция будет выглядеть так:

document.body.clientHeight

Далее нам потребуется как-то вывести результат работы "clientHeight" - это document.write

После этого соберем весь код вместе добавим туда еще и "script"

<script>document.write(document.body.clientHeight);</script>

Результат получения высоты, которое занимает body:

Разместим выше приведенный пример прямо здесь.

Вывод о clientHeight:

Здесь выдается какое-то значение "body", но что-то оно не похоже на реальность... как минимум ещё на 2 надо умножить...

Поэтому проверим данное свойство относительно "элемента" - у которого заранее известна высота...

Теперь давайте это применим к другому элементу DOM-a

Пусть это будет div добавим id + style + width и border и получим:

<div id="is_id" style="width:500px; height:50px; border: 1px solid">Здесь текс</div>

Далее script + getElementById("is_id")

<script> document.write(document.getElementById("is_id").clientHeight);</script>
И выведем здесь результат:
Здесь текст
Вывод:

Здесь однозначно можно сказать, что высоту блока/элемента свойство "clientHeight" определяет точно!




InnerHeight — внутренняя рабочая часть окна.

Как мы будем использовать "innerHeight" - для определения внутренней высоты окна браузера.

Нам понадобится:

Тег script, внутрь помещаем document.write и уже во внутрь "innerHeight"

Соберем эту всю конструкцию вместе:

<script>document.write(innerHeight);</script>
Разместим данный код прямо здесь:
Вывод о innerHeight:

Как мы видим из результата, "innerHeight" получил высоты внутреннюю окна браузера.

---

Использование innerHeight для определения высоты другого элемента на сайте

Как я не пытался использовать "innerHeight" через чистый "javascript" для того, чтобы узнать высоты другого объекта - увы, у меня не получилось!

НО!

Мы можем использовать innerHeight() в jQuery

Выше мы уже использовали этот div и его же и будем использовать.

<div id="is_id" style="width:500px; height:50px; border: 1px solid">Здесь текс</div>

Не забываем, что нужно подключить jquery

Получаем объект - это равносильно "document.getElementById("is_id")"

$( "#is_id" )

Далее добавляем :

innerHeight()

И чтобы вывести результат :

document.write

Соберем весь код получения высоты блока через innerHeight() в jQuery

<div id="is_id" style="width:500px; height:50px; border: 1px solid">Здесь текст </div>

<script> document.write( $( "#is_id" ).innerHeight() ) ;</script>

Результат выведем прямо здесь:

red




OuterHeight — наружная высота окна.

outerHeight - отличается от выше приведенного пункта тем, что это свойство определяет высоты наружного блока.

Проделаем абсолютно те же действия, что и в предыдущем пункте только заменим "innerHeight" на "outerHeight"

<script>document.write(outerHeight );</script>

Результат:

OuterHeight() в jQuery

Также меняем "innerHeight" на "outerHeight"

Выше был размещен наш div:

Html:

<div id="is_id" style="width:500px; height:50px; border: 1px solid">Здесь текст </div>

<script> document.write( $( "#is_id" ).innerHeight() ) ;</script>

Javascript + jQuery
<script> document.write( $( "#is_id" ).outerHeight () ) ;</script>
Получаем результат:



Screen.height и screen.availHeight - высота экрана

У нас остались еще "screen.height" и screen.availHeight

Screen.height — разрешение экрана по горизонтали.

<script>document.write(screen.height);</script>

Результат:

Screen.availHeight

screen.availHeight — доступная область эркана для окон. Не учитывает служебные панели операционной системы, например, панель задач в Windows.

<script>document.write(screen.availHeight);</script>

Результат: