В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 19-03-2024! 🞨
Меню :
js (244)



Blog (1392)
php (329)
js (244)
html (147)
css (131)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
online (29)
Показать еще :
fonts (26)
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
hosting (18)
svg (18)
input (18)
php date (17)
board (16)
php time (16)
html book (16)
color (15)
info (15)
img (14)
js time (14)
js url (14)
js events (14)
htaccess (13)
select (13)
notepad (13)
osclass (13)
keyboard (12)
знак (12)
dw block (12)
php img (12)
php path (12)
table (12)
download (12)
icon (11)
form (11)
jsphp (11)
alphabet (10)
keyframes (10)
js delete (10)
yandex (10)
mouse (10)
chart (9)
hover (9)
dosite (8)
browser (8)
php post (7)
comment (7)
php url (7)
iframe (6)
php get (6)
mysql (6)
click (6)
list (6)
canvas (6)
adminka (6)
vs code (6)
js id (5)
mb (5)
heading (5)
value (5)
reg.ru (5)
ftp (5)
year (5)
js math (5)
tag a (5)
bbcode (4)
php var (4)
base64 (4)
xml (4)
scandir (4)
games (4)
flags (4)
symbols (4)
week (4)
day (4)
ssl (4)
нок (4)
submit (4)
task (4)
vk (4)
month (4)
pages (4)
console (4)
js form (4)
domen (3)
line (3)
https (3)
js post (3)
jquery post (3)
money (3)
numbers (3)
js img (3)
padding (3)
куб (3)
captcha (3)
ucoz (3)
js hash (3)
tag hr (2)
details (2)
typeof (2)
seo (2)
prompt (2)
sitemap (2)
рся (2)
youtube (2)
height (2)
arrows (2)
js vars (2)
counter (2)
google (2)
qr kod (2)
video (2)
speed (1)
smile (1)
нод (1)
rutube (1)
scroll (1)
windows (1)
archive (1)
jino (1)
cursor (1)

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

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

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

    red


  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>

    Результат:

Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.019325 секунд. Подробнее