Шрифт:
Пример 15.9. Получение размеров видимой области документа
// Возвращает размеры видимой дбласти в виде свойств w и h объекта
function getViewportSize(w) {
// Использовать указанное окно или текущее, если функция вызвана без аргумента
w = w || window;
// Следующий способ работает во всех броузерах, кроме IE версии 8 и ниже
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>
, взятого в качестве примера выше, ограничивающий прямоугольник будет включать обе строки целиком.