Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

Поддержи проект!!! smile

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

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

  1. Вывести с помощью clientHeight высоты body
  2. innerHeight — внутренняя высота окна.
  3. outerHeight — наружная высота окна.
  4. screen.height и screen.availHeight - высота экрана
  1. Вывести с помощью 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" определяет точно!

  2. 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>

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

  3. 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>
    Получаем результат:

  4. 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>

    Результат:


Последняя дата редактирования : 24.02.2021 12:10
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
высота javascript высота окна javascript javascript высота экрана высота элемента javascript javascript получить высоты высота браузера javascript javascript высота окна браузера поиск в высоты javascript как узнать высоты окна браузера javascript javascript изменить высоты asyncfileupload как получить высоты экрана javascript javascript высота элемента в пикселях

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
08/04/2021 07:12
Сам афигеваю!
подробнее.
stream :
07/04/2021 05:56
Неплохо)
подробнее.
Марат :
24/03/2021 11:01
Да что вы!? За что обижаться то?Вы тот редкий человек, который смог написать! Вы молодец!Человек, же который не…
подробнее.
Виталий :
24/03/2021 06:05
Не стоит обижаться, люди могут не понимать что ошибка не критична. Может быть до конца не изучали…
подробнее.
Марат :
23/03/2021 02:09
Спасибо, за сообщение! В архив попал вариант, который был на тестировании и там остались некоторые…
подробнее.