Теперь, когда известно, как с помощью CSS задавать положение и размеры HTML_ элементов, возникает естественный вопрос: как выяснить положение и размеры элемента? Например, может появиться необходимость позиционировать средст_ вами CSS всплывающее «DHTML_окно» по центру некоторого HTML_элемента, а для этого необходимо знать его положение и размеры.
В современных броузерах координаты X и Y элемента можно определить с помо_ щью свойств offsetLeft и offsetTop. Аналогичным образом ширину и высоту эле_
16.2. CSS для DHTML
мента можно определить с помощью свойств offsetWidth и offsetHeight. Эти свой_ ства доступны только для чтения и возвращают числовые значения в пикселах (а не CSS_строку с суффиксом «px»). Они соответствуют CSS_атрибутам left, top, width и height, но не являются частью стандарта CSS. Впрочем, они не являются частью ни одного из стандартов: впервые они появились в Microsoft IE 4 и затем были реализованы остальными производителями броузеров.
К сожалению, нередко свойств offsetLeft и offsetTop бывает недостаточно. Эти свойства определяют координаты X и Y элемента относительно некоторого друго_ го элемента, определяемого с помощью свойства offsetParent. Для позиционируе_ мых элементов свойство offsetParent обычно ссылается на тег <body> или <html> (для них свойство offsetParent имеет значение null) или позиционируемый пре_ док позиционируемого элемента. Для непозиционируемых элементов в разных броузерах свойство offsetParent может принимать разные значения. Например, в IE строки таблицы позиционируются относительно вмещающей таблицы. Та_ ким образом, переносимый способ определения положения элемента заключает_ ся в том, чтобы обойти в цикле все ссылки offsetParent и сложить вместе все сме_ щения по каждой из координат. Вот пример программного кода, который может использоваться для этих целей:
// Возвращает координату элемента e по оси X.
function getX(e) {
var x = 0; // Начальное значение 0
while(e) { // Начинать с элемента e
x += e.offsetLeft; // Добавить смещение
e = e.offsetParent; // И перейти по ссылке offsetParent
}
return x; // Вернуть сумму всех смещений
}
Функция getY() может быть реализована простой заменой свойства offsetLeft свойством offsetTop.
Примечательно, что в предыдущем примере такие функции, как getX(), возвра_ щают координаты относительно начала документа. Они соответствуют CSS_ко_ ординатам и на них не влияет положение полос прокрутки броузера. В главе 17 вы узнаете, что координаты, соответствующие событиям мыши, являются окон_ ными, а для перехода к координатам документа к ним необходимо добавить по_ зиции полос прокрутки.
Продемонстрированный здесь метод getX() имеет один недостаток. Далее вы уви_ дите, что с помощью CSS_атрибута overflow внутри документа можно создавать прокручиваемые области. Когда элемент располагается внутри такой прокручи_ ваемой области, значение смещения элемента не учитывает положение полос прокрутки области. Если в веб_странице используются такие прокручиваемые области, это может потребовать более сложного способа вычисления координат, например:
function getY(element) {
var y
=
0;
for(var
e = element; e; e = e.offsetParent) //
Цикл по
offsetParent
y
+= e.offsetTop;
//
Сложить
значения offsetTop
// Теперь обойти все родительские элементы, отыскать среди них элементы,
378 Глава 16. CSS и DHTML
// где установлено свойство scrollTop, и вычесть эти значения из суммы
// смещений. Однако цикл должен быть прерван по достижении элемента
// document.body, в противном случае будет принята во внимание величина
// прокрутки самого документа и в результате получены оконные координаты. for(e = element.parentNode; e && e != document.body; e = e.parentNode)
if (e.scrollTop) y _= e.scrollTop; // вычесть величину прокрутки
// Данная координата Y учитывает величину прокрутки внутренних областей документа. return y;
