Исследование высоты страницы и блоков

При создании html страниц ширину того или иного объекта обычно указывают явно (в процентах, либо в пикселах), а вот высота довольно часто может меняться в зависимости от содержимого. Широко распространенными задачами, связанными с высотой блока, являются: «прокрутка» скроллинга (scrolling) до определенного места, расположение блока по центру или внизу страницы, позиционирование одного блока относительно другого и т.д.
Последняя задача также связана с абсолютным смещением, о котором можно почитать в другой статье. К сожалению CSS здесь не всегда поможет, особенно если присутствует динамика, а вот JavaScript…

высота страницы

Методы для определения высоты объекта window:

Свойство Описание
innerHeight (innerWidth) высота клиентской области окна обозревателя
outerHeight (outerWidth) высота окна обозревателя
screen.availHeight (screen.availWidth) высота рабочей области экрана в пикселях (исключая высоту панели задач)
screen.height (screen.width) высота экрана в пикселях
screenY (screenX) расстояние от верхней границы экрана до верхней границы окна обозревателя
scrollY (scrollX) прокрутка документа по вертикали
pageYOffset (pageXOffset) текущая позиция страницы по вертикали относительно верхнего левого угла окна

Надо отметить, что разными браузерами, во-первых, не все свойства поддерживаются, во-вторых, не все значения свойств совпадают. Также не стоит забывать, что это все свойства объекта window, а это значит что они и относятся только к объекту window, то есть нельзя писать document.getElementById(id).innerHeight и т.д. К сожалению, в процессе тестирования (IE 6, FF 2.0, Opera 9.25) было выявлено, что одинаково всеми браузерами поддерживается только window.screen.availHeight и window.screen.height (см. сводную таблицу ниже). Но в подовляющем большинстве случаев этого не достаточно, часто бывает нужно узнать высоту произвольного блока или контейнера, поэтому следует обратиться к другим способам нахождения высоты.

Свойство Описание
clientHeight (clientWidth) высота блока без учета скроллинга
scrollHeight (scrollWidth) высота блока с учетом скроллинга
scrollTop (scrollLeft) смещение текущей позиции по вертикали относительно верхней границы блока
offsetHeight (offsetWidth) высота блока с/без(в разных браузерах) скроллинга

Важное замечание: данные свойства необходимо использовать после полной загрузки страницы, в противном случае значения могут сильно отличаться от реальных. Почему? Подумайте сами…

Ваш браузер (пример получения значений свойств до полной загрузки страницы, не забудьте нажать refresh).

примечание

Значения в таблице зависят от индивидуальных настроек (toolbar’ов, строки состояния, размера шрифта и т.д.), поэтому могут отличаться от Ваших даже при совпадении версии браузера.

выводы

  • DOCTYPE влияет на значение описанных выше параметров
  • при определении высоты экрана всегда можно положиться на window.screen.height
  • для нахождения высоты видимой части страницы или блока используйте document.getElementById(id).clientHeight, с учетом скроллинга — document.getElementById(id).scrollHeight

 

Оцените статью
Добавить комментарий

  1. 197BD

    статья класс!наконец-то все в одном месте собрано

  2. Max

    Все свойства собраны на одной странице, да ещё и табличка где чего работает. Спасибо.

  3. Паша

    Действительно спасибо! Давно искал общую инфу…

  4. melok.com.ua

    Статья отличная!Казалось бы элементарные вещи, но иногда они забирают уйму времени, особенно при написании кросбраузерного кода.Хотел писать свою, видать уже не нужно, спасибо автору!

  5. Иван

    Да, автор молодец!!! Тоже ищу, ищу) Статься супер!

  6. virua

    Полезный материал. И все вместе.

  7. Arhont

    ПРОСТО СЛОВ НЕТ!!! ЦЕЛИЙ ДЕНЬ мучил выражение if (yp[i] >(doc_height-5+ window.scrollY)) а оно не работало в ИЕ (теперь понятно что нужно document.body.scrollTop) . АВТОРУ ОГРОМНОЕ СПАСИБО

  8. AMBA

    А IE7, chrome, safari уже не нужны никому?

  9. Dima

    ИЕ 7 = кал
    хром от гугла = ф топку
    сафари = для маководов, полезно бы описать

  10. Сергей

    спс. давненько не встречал такого изложения материала. приятно читать.

  11. Lebnik

    Отличная статья, однако у всем известного jquery есть $(window).height(), которая тоже весьма правильно определяется размер внутреннего окна для всех браузеров кроме Оперы, а для оперы помогло window.innerHeight, за что спасиб!

  12. George

    Это все фигня, а вот как в табличке строчка "активная" строка подсвечивается вот это интересно?

  13. vadim

    автору респект!!! Класная статья

  14. http://e-kzn.ru

    как в табличке строчка "активная" строка подсвечивается События onmouseover и onmouseout row.onmouseover = function() { backlighting( this, true ); } row.onmouseout = function() { backlighting( this ); } , функция примерно такая /* element — объект TR, столбцы которого будем подсвечивать при наведении мыши set — true подсветить */ function backlighting( element, set ) { if ( set == null ) set = false; element.cells[0].style.backgroundColor = set ? '#e4e4e4' : 'transparent'; element.cells[1].style.backgroundColor = set ? '#e4e4e4' : 'transparent'; }