При работе со свойствами стилей объекта CSS2Properties помните, что все значе_ ния должны быть указаны в виде строк. В таблице стилей или атрибуте style можно написать:
Обратите внимание, что точки с запятыми остаются вне строк. Это обычные точ_ ки с запятой, употребляемые в синтаксисе языка JavaScript. Точки с запятой, используемые в таблицах CSS_стилей, не нужны в строковых значениях, уста_ навливаемых с помощью JavaScript.
Кроме того, помните, что во всех свойствах позиционирования должны быть указаны единицы измерения. Следовательно, нельзя устанавливать свойство left подобным образом:
e.style.left = 300; // Неправильно: это число, а не строка e.style.left = "300"; // Неправильно: отсутствуют единицы измерения
Единицы измерения обязательны при установке свойств стиля в JavaScript – так же, как при установке атрибутов стиля в таблицах стилей. Далее приво_ дится правильный способ установки значения свойства left элемента e равным 300 пикселов:
e.style.left = "300px";
Чтобы установить свойство left равным вычисляемому значению, обязательно добавьте единицы измерения в конце вычислений:
Как побочный эффект добавления единиц измерения, добавление строки преоб_ разует вычисленное значение из числа в строку.
Объект CSS2Properties может также использоваться для получения значений CSS_атрибутов, явно установленных в атрибуте style элемента, или для чтения любых встроенных значений стилей, ранее установленных JavaScript_кодом. Однако и здесь необходимо помнить, что значения, полученные из этих свойств, представляют собой строки, а не числа, поэтому следующий код (предполагаю_ щий, что для элемента e с помощью встраиваемых стилей установлены поля) не делает того, что от него, возможно, ожидалось:
var totalMarginWidth = e.style.marginLeft + e.style.marginRight;
А вот такой код будет работать правильно:
var totalMarginWidth = parseInt(e.style.marginLeft) + parseInt(e.style.marginRight);
Это выражение просто отбрасывает спецификации единиц измерения, возвра_ щаемые в конце обеих строк. В нем предполагается, что свойства marginLeft и mar_
16.3. Использование стилей в сценариях
ginRight заданы с одинаковыми единицами измерения. Если во встроенных сти_ лях в качестве единиц измерения указаны исключительно пикселы, то, как пра_ вило, можно обойтись простым отбрасыванием единиц измерения, как в данном примере.
Вспомните, что некоторые CSS_атрибуты, например margin, представляют собой сокращения от других свойств, например margin_top, margin_right, margin_bottom и margin_left. Объект CSS2Properties имеет свойства, соответствующие этим сокра_ щенным атрибутам. Так, можно установить свойство margin следующим образом:
Можно также получить значения сокращенных свойств, но это редко имеет смысл, поскольку обычно в этом случае приходится разбивать полученное зна_ чение на отдельные компоненты. Как правило, это сделать сложно, в то время как получить свойства_компоненты по отдельности намного проще.
И наконец, позвольте мне снова подчеркнуть, что когда вы получаете объект CSS2Properties через свойство style объекта HTMLElement, свойства этого объекта представляют значения встроенных атрибутов стилей элемента. Другими слова_ ми, установка одного из этих свойств эквивалентна установке CSS_атрибута в ат_ рибуте style элемента – она влияет только на данный элемент и имеет приоритет над конфликтующими установками стилей из других источников в CSS_каска_ де. Именно такое точное управление отдельными элементами и требуется при создании DHTML_эффектов с помощью JavaScript.
Однако когда мы читаем значения этих свойств в CSS2Properties, они возвращают осмысленные значения, только если были ранее установлены нашим JavaScript_ кодом или если HTML_элемент, с которым мы работаем, имеет встроенный атри_ бут style, установивший нужное свойство. Например, документ может включать таблицу стилей, устанавливающую левое поле для всех абзацев равным 30 пик_ селов, но если прочитать свойство leftMargin одного из абзацных элементов, бу_ дет получена пустая строка, если только этот абзац не имеет атрибута style, пе_ реопределяющего значение, установленное таблицей стилей.
Поэтому несмотря на то, что объект CSS2Properties может использоваться для ус_ тановки стилей, переопределяющих другие стили, он не позволяет запросить CSS_каскад и определить полный набор стилей, применяемых к данному элемен_ ту. В разделе 16.4 мы кратко рассмотрим метод getComputedStyle() и его альтерна_ тиву в IE – свойство currentStyle, предоставляющие именно такую возможность.
Пример: всплывающие подсказки в CSS
Пример 16.4 представляет собой JavaScript_модуль, предназначенный для ото_ бражения простых всплывающих DHTML_подсказок, как показано на рис. 16.5.
Всплывающие подсказки выводятся в двух вложенных элементах <div>. Внеш_ ний элемент <div> позиционируется по абсолютным координатам и имеет фон, который позволяет ему выступать в роли тени. Внутренний элемент <div> пози_ ционируется относительно внешнего элемента <div> с учетом необходимости соз_ дания эффекта тени и отображает содержимое подсказки. Стили подсказки за_ даются в трех разных местах. Во_первых, в статических таблицах стилей, опре_ деляющих тень, цвет фона, рамку и шрифт текста подсказки. Во_вторых, во встроенных стилях (таких как position:absolute), определяемых при создании элементов <div> в конструкторе Tooltip(). В_третьих, в стилях top, left и visibi_ lity, которые устанавливаются при выводе подсказки методом Tooltip.show().
Обратите внимание: пример 16.4 – это простейшая реализация модуля, который просто отображает и скрывает подсказки. Позднее мы расширим данный при_ мер, добавив в него механизм вывода подсказок в ответ на события от мыши (см. пример 17.3).
Пример 16.4. Реализация всплывающих подсказок средствами CSS
