JavaScript. Подробное руководство, 6-е издание

   if (w.innerWidth != null)
   return {w:w.innerWidth,
   h:w.innerHeight};

   // Для IE (и других броузеров) в стандартном режиме
   var d = w.document;
   if (document.compatMode == "CSS1Compat")
   return {w:d.documentElement.clientWidth,
   h:d.documentElement.clientHeight };

   // Для броузеров в режиме совместимости
   return {w:d.body.clientWidth,
   h:d.body.clientWidth };
  }

В двух примерах выше использовались свойства scrollLeft, scrollTop, clientWidth и clientHeight. Мы встретимся с этими свойствами еще раз в разделе 15.8.5.

15.8.2. Определение геометрии элемента

Самый простой способ определить размеры и координаты элемента - обратиться к его методу getBoundingClientRect. Этот метод впервые появился в IE5 и в настоящее время реализован во всех текущих броузерах. Он не принимает аргументов и возвращает объект со свойствами left, right, top и bottom. Свойства left и top возвращают координаты X и Y верхнего левого угла элемента, а свойства right и bottom возвращают координаты правого нижнего угла.

Этот метод возвращает позицию элемента в системе координат видимой области. (Слово «Client» в имени метода getBoundingClientRect косвенно указывает на клиентскую область веб-броузера, т. е. на окно и видимую область в нем.) Чтобы перейти к координатам относительно начала документа, которые не изменяются после прокрутки окна броузера пользователем, нужно добавить смещения прокрутки:

  var box = e.getBoundingClientRect; // Координаты в видимой области
  var offsets = getScrollOffsets; // Вспомогат. функция, объявленная выше
  var х = box.left + offsets.x; // Перейти к координатам документа
  var у = box.top + offsets.у;

Кроме того, во многих броузерах (и в стандарте W3C) объект, возвращаемый методом getBoundingClientRect, имеет свойства width и height, но оригинальная реализация в IE не поддерживает их. Для совместимости ширину и высоту элемента можно вычислять, как показано ниже:

  var box = e.getBoundingClientRect;
  var w = box.width || (box.right - box.left);
  var h = box.height || (box.bottom - box.top);

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

(margins). Координаты, возвращаемые методом getBoundingClientRect, включают рамку и отступы элемента, но не включают поля.

Если слово «Client» в имени метода getBoundingClientRect определяет систему координат возвращаемого прямоугольника, то о чем свидетельствует слово «Bounding» (ограничивающий)? Блочные элементы, такие как изображения, абзацы и элементы <div>, всегда отображаются броузерами в прямоугольных областях. Однако строчные элементы, такие как <span>, <code> и <b>, могут занимать несколько строк и таким образом состоять из нескольких прямоугольных областей. Например, представьте некоторый курсивный текст (отмеченный тегами <i> и </i>), разбитый на две строки. Область, занимаемая этим текстом, состоит из прямоугольника в правой части первой строки и прямоугольника в левой части второй строки (в предположении, что текст записывается слева направо). Если передать методу getBoundingClientRect строчный элемент, он вернет геометрию «ограничивающего прямоугольника» (bounding rectangle), содержащего все отдельные прямоугольные области. Для элемента <i>, взятого в качестве примера выше, ограничивающий прямоугольник будет включать обе строки целиком.

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

Мы уже знаем, что методы модели DOM, такие как getElementsByTagName, возвращают «живые» результаты, изменяющиеся синхронно с изменением документа. Объекты прямоугольных областей (и списки объектов прямоугольных областей), возвращаемые методами getBoundingClientRect и getClientRects не являются «живыми». Они хранят статические сведения о визуальном представлении документа на момент вызова. Они не обновляются, если пользователь прокрутит документ или изменит размеры окна броузера.

15.8.3. Определение элемента в указанной точке

Метод getBoundingClientRect позволяет узнать текущую позицию элемента в видимой области. Но иногда бывает необходимо решить обратную задачу - узнать, какой элемент находится в заданной точке внутри видимой области. Сделать это можно с помощью метода elementFromPoint объекта Document. Он принимает координаты X и Y (относительно начала координат видимой области, а не документа) и возвращает объект Element, находящийся в этой позиции. На момент написания этих строк алгоритм выбора элемента не был строго определен, но суть реализации метода сводится к тому, что он должен возвращать самый внутренний и самый верхний (в смысле CSS-атрибута z-index, который описывается в разделе 16.2.1.1) элемент, находящийся в этой точке. Если передать ему координаты точки, находящейся за пределами видимой области, метод elementFromPoint вернет null, даже если после преобразования координат в систему координат документа получится вполне допустимая точка.

Метод elementFromPoint выглядит весьма практичным, и наиболее очевидный случай его использования - определение элемента, находящегося под указателем мыши по его координатам. Однако, как будет показано в главе 17, объект события от мыши уже содержит эту информацию в своем свойстве target. Именно поэтому на практике метод elementFromPoint почти не используется.

15.8.4. Прокрутка

В примере 15.8 демонстрировалось, как определять позиции полос прокрутки окна броузера. Чтобы заставить броузер прокрутить документ, можно присваивать значение используемым в этом примере свойствам scrollLeft и scrollTop, но существует более простой путь, поддерживаемый с самых ранних дней развития языка JavaScript. Метод scrollTo объекта Window (и его синоним scroll) принимает координаты X и Y точки (относительно начала координат документа) и устанавливает их в качестве величин смещения полос прокрутки. То есть он прокручивает окно так, что точка с указанными координатами оказывается в верхнем левом углу видимой области. Если указать точку, расположенную слишком близко к нижней или к правой границе документа, броузер попытается поместить эту точку как можно ближе к верхнему левому углу видимой области, но не сможет обеспечить точное их совпадение. Следующий пример прокручивает окно броузера так, что видимой оказывается самая нижняя часть документа: