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

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

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() не являются «живыми». Они хранят статические сведения о визуальном представлении документа на момент вызова. Они не обновляются, если пользователь прокрутит документ или изменит размеры окна броузера.

Оглавление книги