Чтение онлайн

Этот метод возвращает позицию элемента в системе координат видимой области. (Слово «Client» в имени метода

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

Кроме того, во многих броузерах (и в стандарте W3C) объект, возвращаемый методом

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

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

). Отступы окружаются необязательной рамкой (), а рамка окружается необязательными полями

(

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

Если слово «Client» в имени метода

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

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

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

Мы уже знаем, что методы модели DOM, такие как

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

Метод

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

Метод

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

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

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

Метод

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