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

При создании 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) высота блока с/без(в разных браузерах) скроллинга

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

<

сводная таблица (эта страница на экране 1280х1024)

Свойство без DOCTYPE !DOCTYPE XHTML 1.0 Transitional
IE (6) FF (2.0) Opera (9.25) IE (6) FF (2.0) Opera (9.25)
window.innerHeight undefined 807 848 undefined 807 848
window.outerHeight undefined 979 911 undefined 979 911
window.screen.availHeight 971 971 971 971 971 971
window.screen.height 1024 1024 1024 1024 1024 1024
window.screenY undefined -4 -23 undefined -4 -23
window.scrollY undefined изменяется в зависимости от прокрутки undefined undefined изменяется в зависимости от прокрутки undefined
window.pageYOffset undefined изменяется в зависимости от прокрутки изменяется в зависимости от прокрутки undefined изменяется в зависимости от прокрутки изменяется в зависимости от прокрутки
document.body.clientHeight 846 807 848 3196 3124 3136
document.body.scrollHeight 3252 3202 3166 3196 3124 3136
document.body.scrollTop изменяется в зависимости от прокрутки изменяется в зависимости от прокрутки изменяется в зависимости от прокрутки 0 0 0
document.documentElement.scrollTop 0 0 0 изменяется в зависимости от прокрутки изменяется в зависимости от прокрутки изменяется в зависимости от прокрутки
document.body.offsetHeight 850 3192 848 3196 3124 3136
document.getElementById(this_tbl).clientHeight 361 371 361 361 370 361
document.getElementById(this_tbl).scrollHeight 361 371 361 361 370 361
document.getElementById(this_tbl).offsetHeight 361 371 361 361 370 361

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


примечание

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

выводы

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

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

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

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

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

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

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

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

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

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

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

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

  11. как в табличке строчка "активная" строка подсвечивается События 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'; }

  12. Нашёл ещё список, более полный.. http://allo.usaaa.ru/dhtml13.htm Просто перечисление, без тестирования, но список большой, можно запробоваться.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *