СКРИПТЫ alt phpjshtmlcssblog
ТЕГИ:
php (267)
js (136)
html (133)
css (96)
html tags (58)
edit text (37)
jquery (36)
form html (29)
php array (28)
foto (23)
fonts (22)
forum (19)
atom (17)
board (17)
hosting (17)
html book (17)
Показать еще :
svg (16)
js method (16)
php file (15)
ruweb.net (15)
color (14)
osclass (13)
htaccess (13)
path (12)
table (12)
input (11)
icon (11)
info (11)
online (11)
yandex (11)
php date (11)
notepad (11)
js delete (11)
php img (10)
url (10)
jsphp (10)
form (8)
task (7)
cookie (7)
comment (7)
php url (7)
click (6)
ftp (6)
js url (6)
value (5)
reg.ru (5)
mb (5)
adminka (5)
js id (4)
bbcode (4)
js form (4)
select (4)
search (4)
js copy (4)
vk (3)
captcha (3)
js time (3)
iframe (3)
vs code (3)
sitemap (2)
js post (2)
browser (2)
console (2)
seo (2)
tag hr (2)
ukoz (2)
header (1)
archive (1)
smile (1)
numbers (1)
ssl (1)
books (1)

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

17.02.2021 Марат 52 0 js |
высота окна - это может быть высота окна браузера, либо высота вообще монитора. Если способы определить высоту окна любого элемента с помощью 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>

    Результат:

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

Сообщение системы комментирования :

01.09.2021

Форма пока доступна только админу... скоро все заработает...надеюсь...

Последние комментарии :
Марат :
10.10.2021 17:20
Добавлен новый смайл
подробнее.
Марат :
05.10.2021 26:37
Страница sitemap.html восстановлена. Но будут вводиться только страницы…
подробнее.
Марат :
04.10.2021 38:22
Добавил несколько вариантов поставить смайл на страницу своего сайта! 3 варианта! Кроме варианта скачать…
подробнее.
Марат :
17.09.2021 28:02
Установка Яндекс поиск на сайт! Контент обновлен на 100%. Такое ощущение, что старый текст не я…
подробнее.
Марат :
07.09.2021 23:21
Частенько приходится исправлять ошибки и вот...как-то я обратил внимание на надпись: "нажми ctrl enter" на сайте и…
подробнее.
Марат :
23/07/2021 10:58
Сам офигеваю...
подробнее.