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

При создании 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
Оцените статью
Добавить комментарий