<b> // Для IE (и других броузеров) в стандартном режиме</b>
<b> var d = w.document;</b>
<b> if (document.compatMode == "CSS1Compat")</b>
<b> return {w:d.documentElement.clientWidth,</b>
<b> h:d.documentElement.clientHeight };</b>
<b> // Для броузеров в режиме совместимости</b>
<b> return {w:d.body.clientWidth,</b>
<b> h:d.body.clientWidth };</b>
<b>}</b>
В двух примерах выше использовались свойства
<b>scrollLeft, scrollTop, clientWidth</b>
и
<b>clientHeight</b>
. Мы встретимся с этими свойствами еще раз в разделе 15.8.5.
15.8.2. Определение геометрии элемента
Самый простой способ определить размеры и координаты элемента - обратиться к его методу
<b>getBoundingClientRect().</b>
Этот метод впервые появился в IE5 и в настоящее время реализован во всех текущих броузерах. Он не принимает аргументов и возвращает объект со свойствами
<b>left, right, top</b>
и
<b>bottom</b>
. Свойства
<b>left</b>
и
<b>top</b>
возвращают координаты X и Y верхнего левого угла элемента, а свойства
<b>right</b>
и
<b>bottom</b>
возвращают координаты правого нижнего угла.
Этот метод возвращает позицию элемента в системе координат видимой области. (Слово «Client» в имени метода
<b>getBoundingClientRect()</b>
косвенно указывает на клиентскую область веб-броузера, т. е. на окно и видимую область в нем.) Чтобы перейти к координатам относительно начала документа, которые не изменяются после прокрутки окна броузера пользователем, нужно добавить смещения прокрутки:
<b>var box = e.getBoundingClientRect(); // Координаты в видимой области</b>
<b>var offsets = getScrollOffsets(); // Вспомогат. функция, объявленная выше</b>
<b>var х = box.left + offsets.x; // Перейти к координатам документа</b>
<b>var у = box.top + offsets.у;</b>
Кроме того, во многих броузерах (и в стандарте W3C) объект, возвращаемый методом
<b>getBoundingClientRect(),</b>
имеет свойства
<b>width</b>
и
<b>height</b>
, но оригинальная реализация в IE не поддерживает их. Для совместимости ширину и высоту элемента можно вычислять, как показано ниже:
<b>var box = e.getBoundingClientRect();</b>
<b>var w = box.width || (box.right - box.left);</b>
<b>var h = box.height || (box.bottom - box.top);</b>
В главе 16 вы узнаете, что содержимое элемента окружается необязательной пустой областью, которая называется отступом (
<b>padding</b>
). Отступы окружаются необязательной рамкой (
<b>border</b>
), а рамка окружается необязательными полями
(
<b>margins</b>
). Координаты, возвращаемые методом
<b>getBoundingClientRect(),</b>
включают рамку и отступы элемента, но не включают поля.
Если слово «Client» в имени метода
<b>getBoundingClientRect()</b>
определяет систему координат возвращаемого прямоугольника, то о чем свидетельствует слово «Bounding» (ограничивающий)? Блочные элементы, такие как изображения, абзацы и элементы
<b><div>,</b>
всегда отображаются броузерами в прямоугольных областях. Однако строчные элементы, такие как
<b><span>, <code></b>
и
<b><b></b>
, могут занимать несколько строк и таким образом состоять из нескольких прямоугольных областей. Например, представьте некоторый курсивный текст (отмеченный тегами
<b><i></b>
и
<b></i></b>
), разбитый на две строки. Область, занимаемая этим текстом, состоит из прямоугольника в правой части первой строки и прямоугольника в левой части второй строки (в предположении, что текст записывается слева направо). Если передать методу
<b>getBoundingClientRect()</b>
строчный элемент, он вернет геометрию «ограничивающего прямоугольника» (bounding rectangle), содержащего все отдельные прямоугольные области. Для элемента
<b><i></b>
, взятого в качестве примера выше, ограничивающий прямоугольник будет включать обе строки целиком.
Для определения координат и размеров отдельных прямоугольников, занимаемых строчными элементами, можно воспользоваться методом
<b>getClientRects()</b>
, который возвращает объект, подобный массиву, доступный только для чтения, чьи элементы представляют объекты прямоугольных областей, подобные тем, что возвращаются методом
<b>getBoundingClientRect()</b>
.
Мы уже знаем, что методы модели DOM, такие как
<b>getElementsByTagName()</b>
, возвращают «живые» результаты, изменяющиеся синхронно с изменением документа. Объекты прямоугольных областей (и списки объектов прямоугольных областей), возвращаемые методами
<b>getBoundingClientRect()</b>
и
<b>getClientRects()</b>
не являются «живыми». Они хранят статические сведения о визуальном представлении документа на момент вызова. Они не обновляются, если пользователь прокрутит документ или изменит размеры окна броузера.
15.8.3. Определение элемента в указанной точке
Метод
<b>getBoundingClientRect()</b>
позволяет узнать текущую позицию элемента в видимой области. Но иногда бывает необходимо решить обратную задачу - узнать, какой элемент находится в заданной точке внутри видимой области. Сделать это можно с помощью метода
<b>elementFromPoint()</b>
объекта
<b>Document</b>
. Он принимает координаты X и Y (относительно начала координат видимой области, а не документа) и возвращает объект
<b>Element</b>
, находящийся в этой позиции. На момент написания этих строк алгоритм выбора элемента не был строго определен, но суть реализации метода сводится к тому, что он должен возвращать самый внутренний и самый верхний (в смысле CSS-атрибута z-index, который описывается в разделе 16.2.1.1) элемент, находящийся в этой точке. Если передать ему координаты точки, находящейся за пределами видимой области, метод
<b>elementFromPoint()</b>
вернет null, даже если после преобразования координат в систему координат документа получится вполне допустимая точка.
