Как узнать ширину окна браузера
Перейти к содержимому

Как узнать ширину окна браузера

  • автор:

Размеры и прокрутка страницы

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/size-and-scroll-window.

Как найти ширину окна браузера? Как узнать всю высоту страницы, с учётом прокрутки? Как прокрутить её из JavaScript?

С точки зрения HTML, документ – это document.documentElement . У этого элемента, соответствующего тегу , есть все стандартные свойства и метрики и, в теории, они и должны нам помочь. Однако, на практике есть ряд нюансов, именно их мы рассмотрим в этой главе.

Ширина/высота видимой части окна

Свойства clientWidth/Height для элемента document.documentElement – это как раз ширина/высота видимой области окна.

Например, кнопка ниже выведет размер такой области для этой страницы:

Не window.innerWidth/Height

Все браузеры, кроме IE8-, также поддерживают свойства window.innerWidth/innerHeight . Они хранят текущий размер окна браузера.

В чём отличие? Оно небольшое, но чрезвычайно важное.

Свойства clientWidth/Height , если есть полоса прокрутки, возвращают именно ширину/высоту внутри неё, доступную для документа, а window.innerWidth/Height – игнорируют её наличие.

Если справа часть страницы занимает полоса прокрутки, то эти строки выведут разное:

alert( window.innerWidth ); // вся ширина окна alert( document.documentElement.clientWidth ); // ширина минус прокрутка

Обычно нам нужна именно доступная ширина окна, например, чтобы нарисовать что-либо, то есть за вычетом полосы прокрутки. Поэтому используем documentElement.clientWidth .

Ширина/высота страницы с учётом прокрутки

Теоретически, видимая часть страницы – это documentElement.clientWidth/Height , а полный размер с учётом прокрутки – по аналогии, documentElement.scrollWidth/scrollHeight .

Это верно для обычных элементов.

А вот для страницы с этими свойствами возникает проблема, когда прокрутка то есть, то нет. В этом случае они работают некорректно. В браузерах Chrome/Safari и Opera при отсутствии прокрутки значение documentElement.scrollHeight в этом случае может быть даже меньше, чем documentElement.clientHeight , что, конечно же, выглядит как совершеннейшая чепуха и нонсенс.

Эта проблема возникает именно для documentElement , то есть для всей страницы.

Надёжно определить размер страницы с учётом прокрутки можно, взяв максимум из нескольких свойств:

var scrollHeight = Math.max( document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight ); alert( 'Высота с учётом прокрутки: ' + scrollHeight );

Почему так? Лучше и не спрашивайте, это одно из редких мест, где просто ошибки в браузерах. Глубокой логики здесь нет.

Получение текущей прокрутки

У обычного элемента текущую прокрутку можно получить в scrollLeft/scrollTop .

Что же со страницей?

Большинство браузеров корректно обработает запрос к documentElement.scrollLeft/Top , однако Safari/Chrome/Opera есть ошибки (к примеру 157855, 106133), из-за которых следует использовать document.body .

Чтобы вообще обойти проблему, можно использовать специальные свойства window.pageXOffset/pageYOffset :

alert( 'Текущая прокрутка сверху: ' + window.pageYOffset ); alert( 'Текущая прокрутка слева: ' + window.pageXOffset );
  • Не поддерживаются IE8-
  • Их можно только читать, а менять нельзя.

Если IE8- не волнует, то просто используем эти свойства.

Кросс-браузерный вариант с учётом IE8 предусматривает откат на documentElement :

var scrollTop = window.pageYOffset || document.documentElement.scrollTop; alert( "Текущая прокрутка: " + scrollTop );

Изменение прокрутки: scrollTo, scrollBy, scrollIntoView

Чтобы прокрутить страницу при помощи JavaScript, её DOM должен быть полностью загружен.

На обычных элементах свойства scrollTop/scrollLeft можно изменять, и при этом элемент будет прокручиваться.

Никто не мешает точно так же поступать и со страницей. Во всех браузерах, кроме Chrome/Safari/Opera можно осуществить прокрутку установкой document.documentElement.scrollTop , а в указанных – использовать для этого document.body.scrollTop . И будет работать. Можно попробовать прокручивать и так и эдак и проверять, подействовала ли прокрутка, будет кросс-браузерно.

Но есть и другое, простое и универсальное решение – специальные методы прокрутки страницы window.scrollBy(x,y) и window.scrollTo(pageX,pageY).

  • Метод scrollBy(x,y) прокручивает страницу относительно текущих координат. Например, кнопка ниже прокрутит страницу на 10px вниз: window.scrollBy(0,10)
  • Метод scrollTo(pageX,pageY) прокручивает страницу к указанным координатам относительно документа. Он эквивалентен установке свойств scrollLeft/scrollTop . Чтобы прокрутить в начало документа, достаточно указать координаты (0,0) . window.scrollTo(0,0)

scrollIntoView

Для полноты картины рассмотрим также метод elem.scrollIntoView(top).

Метод elem.scrollIntoView(top) вызывается на элементе и прокручивает страницу так, чтобы элемент оказался вверху, если параметр top равен true , и внизу, если top равен false . Причём, если параметр top не указан, то он считается равным true .

Кнопка ниже прокрутит страницу так, чтобы кнопка оказалась вверху:

А следующая кнопка прокрутит страницу так, чтобы кнопка оказалась внизу:

Запрет прокрутки

Иногда бывает нужно временно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – чтобы посетитель мог прокручивать это окно, но не документ.

Чтобы запретить прокрутку страницы, достаточно поставить document.body.style.overflow = «hidden» .

При этом страница замрёт в текущем положении.

При нажатии на верхнюю кнопку страница замрёт на текущем положении прокрутки. После нажатия на нижнюю – прокрутка возобновится.

Вместо document.body может быть любой элемент, прокрутку которого необходимо запретить.

Недостатком этого способа является то, что сама полоса прокрутки исчезает. Если она занимала некоторую ширину, то теперь эта ширина освободится, и содержимое страницы расширится, текст «прыгнет», заняв освободившееся место.

Это может быть не очень красиво, но легко обходится, если вычислить размер прокрутки и добавить такой же по размеру padding .

Итого

  • Для получения размеров видимой части окна: document.documentElement.clientWidth/Height
  • Для получения размеров страницы с учётом прокрутки:

var scrollHeight = Math.max( document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight );

Прокрутка окна:

    Прокрутку окна можно получить как window.pageYOffset (для горизонтальной – window.pageXOffset ) везде, кроме IE8-. На всякий случай – вот самый кросс-браузерный способ, учитывающий IE7- в том числе:

var html = document.documentElement; var body = document.body; var scrollTop = html.scrollTop || body && body.scrollTop || 0; scrollTop -= html.clientTop; // в IE7- смещён относительно (0,0) alert( "Текущая прокрутка: " + scrollTop );
  • window.scrollTo(pageX,pageY) – абсолютные координаты,
  • window.scrollBy(x,y) – прокрутить относительно текущего места.
  • elem.scrollIntoView(top) – прокрутить, чтобы элемент elem стал виден.

Задачи

Полифилл для pageYOffset в IE8

важность: 3

Обычно в IE8 не поддерживается свойство pageYOffset . Напишите полифилл для него.

При подключённом полифилле такой код должен работать в IE8:

// текущая прокрутка страницы в IE8 alert( window.pageYOffset );

В стандартном режиме IE8 можно получить текущую прокрутку так:

alert( document.documentElement.scrollTop );

Самым простым, но неверным было бы такое решение:

// "полифилл" window.pageYOffset = document.documentElement.scrollTop; // использование "полифилла" alert( window.pageYOffset );

Код выше не учитывает текущую прокрутку. Он присваивает window.pageYOffset текущую прокрутку, но при её изменении – не обновляет это свойство автоматически, а поэтому – бесполезен.

Более правильное решение – сделать это свойство геттером. При этом в IE8 для DOM-объектов работает Object.defineProperty :

// полифилл Object.defineProperty(window, 'pageYOffset', < get: function() < return document.documentElement.scrollTop; >>); // использование полифилла alert( window.pageYOffset );

Размеры окна и позиция прокрутки в JavaScript

В этой теме рассмотрим свойства объекта window, которые предназначены для получения внутренних ( innerWidth , innerHeight ) и внешних ( outerWidth , outerHeight ) размеров окна, его положения относительно экрана ( screenLeft , screenTop ) и координат прокрутки страницы ( pageXOffset и pageYOffset ) в JavaScript.

Свойства innerWidth и innerHeight

innerWidth – это свойство, которое позволяет получить внутреннюю ширину окна в пикселях (включая при этом в этот размер ширину вертикальной полосы прокрутки при её наличии).

innerHeight , в отличие от innerWidth предназначено соответственно для возвращения внутренней высоты окна в пикселях.

JavaScript

// получим внутреннюю ширину окна в пикселях const width = window.innerWidth; // получим внутреннюю высоту окна в пикселях const height = window.innerHeight;

Свойства innerWidth и innerHeight доступны только для чтения и не имеют значения по умолчанию.

Если код выполняется в контексте объекта window , то его свойства и методы можно использовать без указания window :

JavaScript

// получим внутреннюю ширину окна в пикселях const width = innerWidth; // получим внутреннюю высоту окна в пикселях const height = innerHeight;

Если вам нужно узнать внутреннюю ширину окна за вычетом ширины его вертикальной полосы прокрутки и любых границ, то используйте свойство clientWidth элемента :

JavaScript

// получим корневой элемент const $html = document.documentElement; // узнаем его ширину const width = $html.clientWidth;

Получение внутренней высоты окна без учёта горизонтальной полосы прокрутки и границ выполняется через clientHeight элемента :

JavaScript

// получим корневой элемент const $html = document.documentElement; // узнаем его высоту const width = $html.clientHeight;

Пример, в котором мы выведем на страницу данные о внутренних размерах окна:

JavaScript Window API - Свойства innerWidth, innerHeight, clientWidth и clientHeight

JavaScript

// . window.onresize = () => { showLog({ innerWidth: innerWidth, innerHeight: innerHeight, clientWidth: document.documentElement.clientWidth, clientHeight: document.documentElement.clientHeight }); }

onresize – это свойство, посредством которого мы назначили обработчик для события resize для window .

outerWidth и outerHeight

Свойства « window.outerWidth » и « window.outerHeight » применяются довольно редко. Они предназначены для получения соответственно ширины и высоты всего окна браузера (включая границы самого окна, панель закладок и т.д.).

JavaScript

// ширина всего окна браузера const width = window.outerWidth; // высота всего окна браузера const height = window.outerHeight;

Пример, в котором мы выведем данные о внешних размерах окна на экран:

JavaScript Window API - Свойства outerWidth и outerHeight

JavaScript

// . window.onresize = () => { showLog({ outerWidth: outerWidth, outerHeight: outerHeight, innerWidth: innerWidth, innerHeight: innerHeight }); }

screenX и screenY (screenLeft и screenTop)

« window.screenX » и « window.screenY » предназначены для получения положения окна браузера (т.е. его x и y координат) относительно экрана.

JavaScript

const screenX = window.screenX; const screenY = window.screenY;

В Internet Explorer 8 и более ранних версиях, объект window не содержит свойств screenX и screenY . В них это выполняется через « window.screenLeft » и « window.screenTop ». В то же время Mozilla Firefox (до версии 64) поддерживает только « window.screenX » и « window.screenY ». Остальные браузеры поддерживает как один, так и другой вариант свойств.

JavaScript

const screenX = window.screenX ? window.screenX : window.screenLeft; const screenY = window.screenY ? window.screenY : window.screenTop;

Например, выведем координаты окна браузера относительно экрана при клике на ссылку:

JavaScript - пример работы со свойствами screenX и screenY

JavaScript

// . // получим ссылку const $getScreenXY = document.querySelector('#getScreenXY'); // при клике на ссылку $getScreenXY.onclick = function (e) { e.preventDefault(); showLog({ screenX: screenX, screenY: screenY }); };

scrollX и scrollY (pageXOffset и pageYOffset)

scrollX и scrollY используются, когда нужно получить количество пикселей, на которые документ пролистали в данный момент соответственно по горизонтали и вертикали. Эти свойства доступны только для чтения.

JavaScript

const scrollX = window.scrollX; const scrollY = window.scrollY;

Возвращаемое ими значение является числом с плавающей точкой. Для того чтобы сделать его целочисленным, можно, например, воспользоваться методом Math.round() :

JavaScript

const scrollX = Math.round(window.scrollX); const scrollY = Math.round(window.scrollY);

Определить, был ли пролистан контент можно, например так:

JavaScript

const hasScrolling = !(window.scrollX === 0 && window.scrollY === 0);

Нахождение в переменной hasScrolling значения false будет говорить о том, что контент в данный момент не пролистан, true – в противном случае.

Пример, в котором мы выведем на экран информацию о значениях прокрутки:

JavaScript Window API - Свойства scrollX и scrollY

JavaScript

// . // назначим обработчик для события scroll window.onscroll = () => { const hasScrolling = !(window.scrollX === 0 && window.scrollY === 0); showLog({ hasScrolling: hasScrolling, scrollX: Math.round(scrollX), scrollY: Math.round(scrollY) }); }

onscroll – это свойство, посредством которого мы назначили обработчик для события scroll для window .

Свойства pageXOffset и pageYOffset идентичны соответственно scrollX и scrollY .

Кроссбраузерное решение (в браузерах в которых не поддерживаются свойства window.scrollX и window.scrollY будут использоваться window.pageXOffset и window.pageYOffset ):

JavaScript

const scrollX = window.scrollX ? window.scrollX : window.pageXOffset; const scrollY = window.scrollY ? window.scrollY : window.pageYOffset;

Как получить размеры экрана, окна и веб-страницы в JavaScript?

Представляю Вашему вниманию перевод небольшой заметки «How to Get the Screen, Window, and Web Page Sizes in JavaScript» автора Dmitri Pavlutin.

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

Однако во всевозможных доступных размерах легко запутаться: существуют размеры экрана, окна, веб-страницы и т.д.

Что означают эти размеры и, главное, как их получить? Именно об этом я и собираюсь рассказать.

1. Экран

1.1. Размер экрана

Размер экрана — это ширина и высота всего экрана: монитора или мобильного дисплея.

Получить информацию о размере экрана можно с помощью свойства screen объекта window :

const screenWidth = window.screen.width const screenHeight = window.screen.height 
1.2. Доступный размер экрана

Доступный размер экрана — это ширина и высота активного экрана без панели инструментов операционной системы.

Для получения доступного размера экрана снова обращаемся к window.screen :

const availableScreenWidth = window.screen.availWidth const availableScreenHeight = window.screen.availHeight 

2. Окно

2.1. Размер внешнего окна (или внешний размер окна)

Размер внешнего окна — это ширина и высота текущего окна браузера, включая адресную строку, панель вкладок и другие панели браузера.

Получить информацию о размере внешнего окна можно с помощью свойств outerWidth и outerHeight объекта window :

const windowOuterWidth = window.outerWidth const windowOuterHeight = window.outerHeight 
2.2. Внутренний размер окна (или размер внутреннего окна)

Внутренний размер окна — это ширина и высота области просмотра (вьюпорта).

Объект window предоставляет свойства innerWidth и innerHeight :

const windowInnerWidth = window.innerWidth const windowInnerHeight = window.innerHeight 

Если мы хотим получить внутренний размер окна без полос прокрутки, то делаем следующее:

const windowInnerWidth = document.documentElement.clientWidth const windowInnerHeight = document.documentElement.clientHeight 

3. Размер веб-страницы

Размер веб-страницы — это ширина и высота отображаемого содержимого (отрендеренного контента).

Для получения размера веб-страницы используйте следующее (включает в себя внутренние отступы страницы, но не включает границы, внешние отступы и полосы прокрутки):

const pageWidth = document.documentElement.scrollWidth const pageHeight = document.documentElement.scrollHeight 

Если pageHeight больше, чем внутренняя высота окна, значит, присутствует вертикальная полоса прокрутки.

4. Заключение

Надеюсь, теперь Вы понимаете, как получать различные размеры.

Размер экрана — это размер монитора (или дисплея), а доступный размер экрана — это размер экрана без панелей инструментов ОС.

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

Наконец, размер веб-страницы — это размер контента.

Благодарю за внимание, друзья!

  • Веб-разработка
  • JavaScript
  • Программирование

Измерения окна, документа и элементов

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

Разрешение экрана

Для определения ширины и высоты экрана пользователя используются свойства width и height объекта window.screen . Эти свойства доступны во всех браузерах.

alert("Разрешение вашего экрана: "+ window.screen.width +"x"+ window.screen.height);

Положение окна браузера

Мнения разработчиков в вопросе какое же свойство должно хранить положение окна относительно верхней левой точки экрана, видимо, разошлись.

В итоге мы получили две пары свойств: window.screenY , window.screenX и window.screenTop , window.screenLeft .

Первые два работают в браузерах Mozilla (например Firefox), вторая пара работает в Internet Explorer и Opera. В браузерах, основанных на движке WebKit (например Safari, Chrome), обе пары работают и их значения равны друг другу соответственно.

Но невозможно абсолютно кросс-браузерно определить положение окна, поскольку в разных браузерах отсчет идет до разных точек. Дело в том, что браузеры Internet Explorer и Opera в значениях screenTop и screenLeft хранят координаты левого верхнего угла документа, а не всего окна, поэтому даже при развертывании на весь экран их значения будут не нулевые.

Напротив, остальные браузеры начинают отсчет от верхней левой точки самого окна, как и ожидается для этих свойств. Стоит отметить, что в Firefox, при развертывании окна на весь экран, значения screenY и screenX могут быть отрицательными.

Странно, но в Opera значения screenY и screenX не undefined , однако я не могу понять, что они значат. При любых перемещениях окна эти значения не меняются и все время отрицательны. Если это не очередной глюк Opera, и я что-то упустил, отпишите, пожалуйста, в комментариях.

Положение окна браузера можно изменить двумя методами:

// Переместить окно в коодинаты x, y: window.moveTo(, ); // Сместить положение окна на значения dx, dy: // (относительно текущего положения) window.moveBy(, );

Размеры окна браузера

Под размерами окна браузера подразумеваются как размер всего окна целиком (вместе с хромом и панелями), так и размер видимой части документа (вьюпорт), или другими словами, размер окна браузера без панелей и хрома.

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

Для получения размеров окна браузера целиком во всех браузерах, кроме Internet Explorer, вы можете использовать свойства window.outerWidth и window.outerHeight . И, насколько я понимаю, аналогов для Internet Explorer не существует.

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

Во всех браузерах, кроме Internet Explorer, вы можете получить размер вьюпорта с помощью свойств window.innerWidth и window.innerHeight . Эти свойства всегда будут включать ширину, или высоту скроллбара, что в некоторых задачах неуместно.

Другим способом определения размеров вьюпорта могут служить свойства clientWidth и clientHeight объекта document.documentElement , или, другими словами, элемента html текущего документа.

var html = document.documentElement; alert("Размер вьюпорта: "+ html.clientWidth +"х"+ html.clientHeight);

Но это справедливо только для режима следования стандартам (CSS1Compat mode), поэтому приведенный выше код работает верно в этом документе.

Но если у страницы не будет указан doctype, то в некоторых браузерах свойства clientWidth и clientHeight объекта document.documentElement будут иметь значения ширины и высоты всего документа целиком, а не только видимой его части, в то время как document.body.clientWidth и document.body.clientHeight наоборот будут иметь значения размеров вьюпорта.

И учитывая то, что нет возможности узнать, что является размерами вьюпорта — свойства document.documentElement или document.body (поскольку они оба существуют, но смысл значений может быть разный), то получается, что кросс-браузерное определение размеров вьюпорта этим способом — невозможно, если документ отображается не в режиме следования стандартам.

Размеры окна браузера можно изменить двумя методами:

// Изменить размер окна к ширине равной width и высоте равной height: window.resizeTo(, ); // Изменить ширину окна на значение dwidth и высоту - на dheight: // (относительно текущего размера) window.resizeBy(, );

Скролл окна браузера

Сколлбар имеет несколько параметров: ширина, высота, значение прокрутки сверху, значение прокрутки слева.

Первые два параметра определяются свойствами scrollWidth и scrollHeight объекта document.documentElement . Это, опять же, справедливо только для режима следования стандартам.

Значения ширины и высоты прокрутки окна — количество пикселей, которые могут быть прокручены скроллом. Другими словами — прямоугольник, образованный всеми видимыми элементами документа.

Примечание на счет элементов я сделал не просто так: если какой-нибудь абсолютно позиционированный элемент будет «вылезать» за пределы body , то он «растянет» ширину/высоту скролла, но размеры document.body останутся прежними. Напротив, если размеры документа меньше, чем размеры вьюпорта — то значения scrollWidth и scrollHeight будут равны размерам документа, а не всего окна.

Стоит отметить, что как и в случае с размерами вьюпорта, в режиме «quirks mode» не всегда понятно, свойства какого элемента ( documentElement или body ) будут иметь нужные нам значения скролла.

Для того, чтобы убедится в том, что в разных браузерах эти свойства имеют разные значения, можете попробовать выполнить тесты, представленные по этой ссылке, в разных браузерах: http://www.quirksmode.org/viewport/experiments/body.html

Для того, чтобы определить на сколько пикселей прокручен документ, нужно обратиться к свойствам scrollTop и scrollLeft объекта document.documentElement , если браузер в режиме следования стандартам, или document.body , если браузер в режиме «quirks mode».

var html = document.documentElement; alert("Вы уже прокрутили "+ html.scrollTop +"px этой страницы");

В браузерах на движке Mozilla (Firefox) или WebKit (chrome, safari) вы можете воспользоваться свойствами window.scrollY и window.scrollX для определения этих значений. Они будут равны scrollTop и scrollLeft соответственно.

Из скрипта вы можете управлять прокруткой страницы, пользуясь следующими методами (обратите внимание на очередность параметров):

// Изменить положение прокрутки к определенным значениям top и left: window.scrollTo(, ); // Сместить положение прокрутки на определенные значения dtop и dleft // (относительно текущих значений): window.scrollBy(, ); // Сместить положение прокрутки на высоту lines строк документа: window.scrollByLines(lines); // Сместить положение прокрутки на высоту pages страниц документа // Под страницей подразумевается высота видимой части документа window.scrollByPages(pages);

Размеры документа и элементов

Одна из самых часто встречаемых задач — определение размера элемента.

Дело в том, что не всегда достаточно узнать какие значения размеров были установлены через стили элемента и особенно это касается «резиновых» элементов (которые растягиваются в зависимости от размеров их содержания), или элементов с фиксированными размерами, но имеющих внутренние отступы.

Во всех браузерах, независимо от режима, вы можете получить размер элемента с помощью свойств offsetWidth и offsetHeight .

Для демонстрации, небольшой пример:

Элемент с не фиксированной шириной и высотой.
Кликните для появления сообщения.
element.onclick = function()

Точно так же можно определить размер всего документа, точнее размеры элемента body :

alert("Размер документа: "+ document.body.offsetWidth +"x"+ document.body.offsetHeight);

Положение элемента на странице

Одна из самых распространенных задач — определение абсолютной позиции элемента относительно левого верхнего угла документа.

Для определения позиции используются следующие свойства элемента:
offsetTop — отступ сверху, измеряется в пикселах относительно родительского элемента.

offsetLeft — отступ слева, измеряется в пикселах относительно родительского элемента.

offsetParent — ближайший родитель, относительно которого делается отсчет. Его значение будет null если текущий элемент невидим ( display: none ) или это корневой элемент документа.

Поскольку значение считается от ближайшего родителя, то абсолютная позиция относительно верхнего левого угла документа обычно считается в цикле, который завершается тогда, когда значение offsetParent будет равно null .

Обычно, функция по определению абсолютной позиции выглядит следующим образом:

function offsetPosition(element) < var offsetLeft = 0, offsetTop = 0; do < offsetLeft += element.offsetLeft; offsetTop += element.offsetTop; >while (element = element.offsetParent); return [offsetLeft, offsetTop]; >

Кликните для появления сообщения.

Таким способом можно считать позицию как статичных элементов ( position: static ), так и элементов с абсолютной позицией ( position: absolute ).

Заключение

Надеюсь, что данная запись поможет вам лучше разобраться в измерениях документа и его элементов. Буду рад услышать замечания или вопросы в комментариях.

Автор: Octane, дата: 26 декабря, 2008 — 23:23

Ожидал увидеть еще способ кросс-браузерного получения координат мыши

Взяв реализацию из jQuery и немного переделав её, получил:

var mousePosition = function(ie) < return ie ? function(doc, body) < return function(e) < return ; >; >(document.documentElement, document.body) : function(e) < return ; > >(/*@cc_on 1 @*/);

Сам не разбирался еще, что происходит в этом большом выражении, возможно получится упростить

Автор: Narthex (не зарегистрирован), дата: 7 марта, 2009 — 18:00

Много полезного, как раз то, что искал. Совсем не то, что ковыряться в Prototype, jQuery или Dojo. Спасибо!

Автор: hogart, дата: 31 марта, 2009 — 14:33

Должен отметить, что функция получения координат элемента относительно верхнего левого угла документа даст неверный результат в IE6, если в цепочке offsetParent попадется элемент с position: relative.

Автор: Дмитлантис (не зарегистрирован), дата: 22 апреля, 2009 — 16:33

Афтор зачод! Наитолковые статьи в рунете по ЯС! Сразу видно берется за дело с головой. Пишы исчо! Где я только не рылся за этим материалом а оно вот он чо! всё тут и на блюдечге!!
// З.Ы. Илья — ф основную книгу эту статью ИМХО этот каждому пригодится, а в этих блогах фиг нашол, ещё повезло что наткнулся =)

Автор: Kirill (не зарегистрирован), дата: 2 мая, 2009 — 19:54

автор пишы исчо это точно:) спс за размеры окна браузера

Автор: Илья Кантор, дата: 2 мая, 2009 — 22:23

На основе некоторых идей этой статьи создан основной материал сайта.

Спасибо за статью, Андрей!

Автор: x-yuri, дата: 11 мая, 2009 — 00:49

Андрей Параничев, а что можешь сказать по поводу следующего способа определения разеров вьюпорта — http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

Автор: vk (не зарегистрирован), дата: 9 августа, 2009 — 12:22
Автор: Андрей Параничев, дата: 16 августа, 2009 — 00:25

Спасибо, всегда путаю, что x (икс) это «left» в переносе на слова.

Автор: JSTalker, дата: 11 августа, 2009 — 08:59

Классная статья, спасибо!

Но подскажите, как эти полезные свойства применить собственно к элементам страницы: к примеру чтоб таблица, структурирующая GUI, масштабировалась относительно размеров видимой обл-ти? К ее атрибутам не применимы свойства :

Автор: Гость (не зарегистрирован), дата: 26 августа, 2009 — 14:05

Как узнать ширину и высоту элемента div до его отображения, это реально? Заранее спасибо

Автор: EugenyK, дата: 30 октября, 2009 — 15:26

Для элемента div
«Элемент с не фиксированной шириной и высотой.
Кликните для появления сообщения.»:
this.offsetWidth (FF3) = 609
this.offsetWidth (Chrome) = 609
this.offsetWidth (opera10) = 613
this.offsetWidth (IE7) = 613
Высота offsetHeight во всех браузерах посчиталась одинаково.

Для body везде получились различные значения высоты.

Автор: Ntropy, дата: 5 ноября, 2009 — 23:09

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

Автор: Vladimir_O, дата: 9 ноября, 2009 — 15:43

А что вы думаете по поводу такого кроссбраузерного определения размера вьюпорта:

var screenWidht = window.innerWidth; if(!screenWidht) < if(document.documentElement) < screenWidht = document.documentElement.clientWidth; >screenWidht = Math.min(screenWidht, document.body.clientWidth); >

Автор: Жорж Борман (не зарегистрирован), дата: 24 декабря, 2009 — 22:52

в IE7 не сработал, выдал 0

Автор: Жорж Борман (не зарегистрирован), дата: 24 декабря, 2009 — 22:57

Я понял. Для IE надо math.max получать. Спасибо

Автор: Гость (не зарегистрирован), дата: 26 февраля, 2010 — 14:19

Работает корректно во всех браузерах!
Определяет размер рабочей области окна!
+ размер области документа (с учетом дивов с абсолютным позициониррованием)
+ работает и в ИЕ6 и в Сафари

function gss() < var w = document.documentElement; var d = document.body; if (w.scrollHeight < d.scrollHeight) < var h = d.scrollHeight >else < var h = w.scrollHeight >if (h if (w.scrollWidth < d.scrollWidth) < var wd = d.scrollWidth >else < var wd = w.scrollWidth >if (wd return < ww:w.clientWidth, wh:w.clientHeight, wsl:w.scrollLeft, wst:w.scrollTop, dw:wd, dh:h >>

Автор: Гость, дата: 26 февраля, 2010 — 14:21

Ой, чуть не забыл пояснить.
функция возвращает:
ww — window width
wh — window height
dw — document width
dh — document height
wsl — window scroll left
wst — window scroll top

Автор: Гость (не зарегистрирован), дата: 26 февраля, 2010 — 14:28

Снова я, уж простите, доработанная функция:

function GetSizes() < var w = document.documentElement; var d = document.body; h = Math.max( w.scrollHeight, d.scrollHeight, w.clientHeight); wd = Math.max( w.scrollWidth, d.scrollWidth, w.clientWidth); return < ww:w.clientWidth, //window width wh:w.clientHeight, //window height wsl:w.scrollLeft, //window scroll left wst:w.scrollTop, //window scroll top dw:wd, //document width dh:h //document height >>

Автор: Гость (не зарегистрирован), дата: 29 декабря, 2011 — 07:51
Автор: lancer, дата: 28 февраля, 2012 — 01:19

Норм, хотя когда футер прижат надо под ie8 как минимум перерасчитывать все.

Автор: Гость (не зарегистрирован), дата: 11 марта, 2010 — 14:14

С этой функцией наткнулся на некоторые проблемы, все описать довольно сложно, лучше выложу исправленный код. Буду признателен если кто нибудь найдет баги и отпишет mail@atlas-is.ru. Я тестировал на:
ИЕ6 ИЕ7 опреа9/10 Мазилла 3,6 Safari(win32) Chrome
для всех браузеров было 4 разных ситуации с разными доктайпами и т.д. в моем случае сейчас функция работает безупречно для: определения видимой области окна браузера (с корректным учетом скроллбаров). определения области документа/страницы с учетом всех элементов на странице (даже при абсолютном позиционировании). и смещение скролла.

function GetSizes() < var w=document.documentElement; var d=document.body; var tww = document.compatMode=='CSS1Compat' && !window.opera?w.clientWidth:d.clientWidth; var twh = document.compatMode=='CSS1Compat' && !window.opera?w.clientHeight:d.clientHeight; var sl = (window.scrollX)?window.scrollX:(w.scrollLeft)?w.scrollLeft:d.scrollLeft; var st = (window.scrollY)?window.scrollY:(w.scrollTop)?w.scrollTop:d.scrollTop; var wW1 = (window.innerHeight && window.scrollMaxY)?d.scrollWidth:(d.scrollHeight >d.offsetHeight)?d.scrollWidth:(w && w.scrollHeight > w.offsetHeight)?w.scrollWidth:d.offsetWidth; var wH1 = (window.innerHeight && window.scrollMaxY)?d.scrollHeight:(d.scrollHeight > d.offsetHeight)?d.scrollHeight:(w && w.scrollHeight > w.offsetHeight)?w.scrollHeight:d.offsetHeight; var wW2 = (self.innerHeight)?self.innerWidth:(w && w.clientHeight)?w.clientWidth:d.clientWidth; var pW = (wW1 < wW2)?wW2:wW1; var wH2 = (self.innerHeight)?self.innerHeight:(w && w.clientHeight)?w.clientHeight:d.clientHeight; var pH = (wH1 < wH2)?wH2:wH1; pW = ($.browser.msie)?pW:Math.max(w.scrollWidth, w.clientWidth, d.scrollWidth, d.offsetWidth); pH = ($.browser.msie)?pH:Math.max(w.scrollHeight, w.clientHeight, d.scrollHeight, d.offsetHeight); if (window.opera)< tww = (d.scrollWidth==d.clientWidth)?w.clientWidth:tww; twh = (d.scrollHeight==d.clientHeight)?w.clientHeight:twh;>return < winWidth:tww, winHeight: twh, winScrollLeft: sl, winScrollTop: st, pageWidth: pW, pageHeight: pH >>

Надеюсь кому то помог! Потому как сам перерыл огромную кучу информации пока соорудил это.

Автор: Гость (не зарегистрирован), дата: 28 августа, 2012 — 16:36

Спасибо, но для тех, кто не подключал jQuery эту часть кода

$.browser.msie

надо заменить на

Автор: stig85 (не зарегистрирован), дата: 31 мая, 2010 — 05:20
Автор: Шторм (не зарегистрирован), дата: 24 июня, 2010 — 02:20

Спасибо. Долго искал эту информацию и нашел.

Автор: edd_k, дата: 29 июля, 2010 — 23:49

А я уже давно забил на попытки сооружать мегауниверсальные функции. Я следую таким правилам:
— верстаю в xhtml со следующим шаблоном пустого дока:

     Title   

— если страница верстается php, то конечно же в нем шлется заголовок

header('Content-Type: text/html; charset=windows-1251');

— если что-то пошло не так, значит накосячил в html-коде и он уже в квирк-моде, открываю в Опере, жму «Соблюдены ли web-стандарты» и добиваюсь успешной проверки на W3C-валидаторе. По-ходу, практически не встречаю в инете страниц, проходящих валидацию. Эта страничка например тоже не проходит — куча досадных ошибок типа не указан тип скрипта, блок стилей вставлен там где нельзя, спаны закрываются, но не открывались перед этим, id дублирующиеся и т.д. Очень распространен подход, когда в js пишут что-то типа

document.write('alert("Hello!");');

(На этой странице такое есть) Ну а слеш в закрывающем теге кто экранировать будет!? Зачем делить слово SCRIPT на две части, если тут же ошибка потяжелее?

     JS Sample      

проходит валидацию, ессесно работает и ничего не нужно делить. Нужно просто не забыть указать тип скрипта, вставить в нем коменты-ограничители для XML-парсера и экранировать символы / и ' в строках.

А когда половина страниц валидируются, другие в квирке рисуются, то конечно начинается каша, геморой, бессонные ночи и т.д.

Итак, начинать следует со стандартизации своих проектов и исправления в них ошибок перед каждым релизом (мы ж не роботы, конечно забываем временами и коменты вставлять и < br >вместо < br />на скорую руку пишем) - отправка страницы прямо из браузера на W3C всегда под рукой.

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

А так, провел небольшой тест на Опера 10.60 (пачка пердыдущих версий скорей всего то же выдаст), IE8 и FF 3.6.6. Создал корректную страницу с длинной таблицей на 100 строк, каждая строка имеет паддинг, прописанный в CSS, что в IE и в Фоксе приводит к увеличению высоты html (т.е. html становится длиннее body), аналогично и при div-верстке, т.е. лично таблицы тут ни при чем. Такая же фича наблюдается и в Опере ИНОГДА. Возможно в квирке - не проследил. В тестовом примере в Опере html не удлинился и не испортил страницу лишним белым куском на 700+ точек.

Результаты таковы (html - это document.documentElement):

Opera FF IE window.screen.availWidth = 1280 1280 1280 window.screen.availHeight = 994 994 994 window.innerWidth = 1280 1280 - window.innerHeight = 878 868 - body.clientTop = 0 0 0 html.clientTop = 0 0 2 body.clientLeft = 0 0 0 html.clientLeft = 0 0 2 body.offsetWidth = 1263 1263 1259 html.offsetWidth = 1263 1263 1259 body.clientWidth = 1263 1263 1259 html.clientWidth = 1263 1263 1259 body.scrollWidth = 1263 1263 1259 html.scrollWidth = 1263 1263 1259 body.offsetHeight = 878 868 848 html.offsetHeight = 878 868 848 body.clientHeight = 878 868 848 html.clientHeight = 878 868 848 body.scrollHeight = 878 868 2471 html.scrollHeight = 2371 3000 3178 body.scrollLeft = 0 0 0 html.scrollLeft = 0 0 0 body.scrollTop = 0 0 0 html.scrollTop - находясь в самом верху = 0 0 0 - находясь в самом низу = 1493 2132 2330 html длиннее body? нет да да

1. Виевпорт во всех трех записан и в body, и в html корректно и с вычетом скролбара.

2. Во всех браузерах body.scrollTop равен 0 не зависимо от того, где мы находимся - вверху или внизу. В принципе, логично, у нас же html скролится, а не body.

2. Во всех браузерах offsetWidth и offsetHeight что у body, что у html равны размеру виевпорта.

3. Исходя из вышесказанного и увиденного полная высота именно body записана только в IE, в котором мы можем видеть, что body - 2471 px, а html - 3178 px; в Опере мы можем понадеяться, что лишней простыни после body не добавлено и следовательно его высота равна высоте html, а вот в Фоксе мы понятия не имеем, что body короче html и вообще короче ли или одинаковы.

Если нужно знать высоту именно body, то в ряде случаев можно попробовать запретить скрол html-у и выдать скролл body. Но в ряде случаев такой финт ушами не получится (если получится вообще, т.к. не пробовал еще). Например если у нас дизайн на 100% высоты видимого окна, тогда чтобы размер документа был на всю видимую высоту даже если контент коротковат для этого, нам придется в css выставить высоту 100% для html, body и контейнера, который содержит контент и например футер или бекграунд внизу. А в таком случае когда контента будет больше чем на высоту виевпорта указанные нами 100% для html будут делать его всегда не меньше чем body в нем,который тоже не меньше чем контент в нем. Т.е. фишка с коротким html и скролящимся в нем body - не возможна.

Вот так. Придется обходится высотой html или решать, как обойти проблему его удлинения.

Автор: Delis, дата: 2 сентября, 2010 - 22:01

Стоит отметить, что в IE8 (может и других версий) screen.width и window.screen.width возвращают не реальное разрешение экрана, а виртуальное (т.е. при изменении масштаба отображения меняется и разрешение, возвращаемое функциями, например, при помощи Ctrl+колесо мыши).

Автор: RE_, дата: 20 сентября, 2010 - 10:19

Доходчиво про ClientX/Y и почему Опера их нормально обрабатывает.

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

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