- •4.2.1. Повторные и опущенные объявления
- •Типы данных
- •3.1.3. Литералы вещественных чисел
- •3.1.6. Специальные числовые значения
- •3.2.2. Управляющие последовательности в строковых литералах
- •3.3. Логические значения
- •3.4.1. Функциональные литералы
- •3.6. Массивы
- •7.6.1. Добавление новых элементов в массив
- •7.7.9. Методы toString() и toLocaleString()
- •7.7.10. Дополнительные методы массивов
- •11.1.2. Классы символов
- •11.1.3. Повторение
- •11.1.4. Альтернативы, группировка и ссылки
- •11.1.6. Флаги
- •1 Здесь функция alert() используется просто для отображения информации: она
- •13.2.2. Сценарии во внешних файлах
- •13.3. Обработчики событий в html
- •13.5.5. Объект Window как контекст исполнения
- •15.2. Свойства объекта Document
- •1 Модель dom может также использоваться для представления xmLдокументов,
- •15.4.2. Узлы
- •15.4.2.1. Типы узлов
- •1 Стандарт dom определяет интерфейсы, а не классы. Те, кто не знаком с термином
- •15.4.2.2. Атрибуты
- •15.5. Обход документа
- •1 Во многих сложных dhtmLэффектах используются также приемы обработки
- •16.1. Обзор css
- •1 Эрик Мейер «css – каскадные таблицы стилей. Подробное руководство», 3е из
- •16.1.1. Применение правил стиля к элементам документа
- •16.2.1. Ключ к dhtml: абсолютное позиционирование
- •16.2.3. Определение положения и размеров элемента
- •16.3.2. Работа со свойствами стилей
- •300 Пикселов:
- •17.1.1.1. Аппаратнозависимые и аппаратнонезависимые события
- •17.1.2. Обработчики событий как атрибуты
- •1 Подробное описание htmLформ, включая пример проверки правильности за
- •17.2.6.3. Интерфейс MouseEvent
- •17.5. События клавиатуры
- •17.5.1. Типы событий клавиатуры
- •17.5. События клавиатуры 441
16.2.3. Определение положения и размеров элемента
Теперь, когда известно, как с помощью CSS задавать положение и размеры HTML
элементов, возникает естественный вопрос: как выяснить положение и размеры
элемента? Например, может появиться необходимость позиционировать средст
вами CSS всплывающее «DHTMLокно» по центру некоторого HTMLэлемента,
а для этого необходимо знать его положение и размеры.
В современных броузерах координаты X и Y элемента можно определить с помо
щью свойств offsetLeft и offsetTop. Аналогичным образом ширину и высоту эле16.2. CSS для DHTML 377
мента можно определить с помощью свойств 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;
}
16.3.1. Соглашения об именах: CSSатрибуты в JavaScript
В именах многих атрибутов CSSстилей, таких как fontfamily, содержатся де
фисы. В JavaScript дефис интерпретируется как знак минус, поэтому нельзя на
писать, например, такое выражение:
element.style.fontfamily = "sansserif";
Таким образом, имена свойств объекта CSS2Properties слегка отличаются от имен
реальных CSSатрибутов. Если имя CSSатрибута содержит дефисы, имя свойст
ва объекта CSS2Properties образуется путем удаления дефисов и перевода в верх
ний регистр буквы, непосредственно следующей за каждым из них. Другими сло
вами, атрибут borderleftwidth доступен через свойство borderLeftWidth, а к атри
буту fontfamily можно обратиться следующим образом:
element.style.fontFamily = "sansserif";
Есть еще одно отличие между именами CSSатрибутов и свойств объекта
CSS2Properties в JavaScript. Слово «float» является ключевым в Java и других
языках, и хотя сейчас это слово не употребляется в JavaScript, оно зарезервиро
вано на будущее. Поэтому в объекте CSS2Properties не может быть свойства с име
нем float, соответствующего CSSатрибуту float. Затруднение преодолевается
путем добавления префикса «css» к атрибуту float, в результате чего образуется
имя свойства cssFloat. Следовательно, значение атрибута float элемента можно
установить или получить при помощи свойства cssFloat, объекта CSS2Properties.388 Глава 16. CSS и DHTML