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

Обратите внимание, насколько функции

и похожи друг на друга. Они обе могут служить шаблонами для реализации похожих анимационных эффектов с использованием CSS-свойств. Однако клиентские библиотеки, такие как jQuery, обычно поддерживают набор предопределенных визуальных эффектов, поэтому вам вообще может никогда не потребоваться писать собственные функции воспроизведения анимационных эффектов, такие как если только вам не понадобится создать какой-нибудь сложный визуальный эффект. Одной из первых и наиболее примечательных библиотек визуальных эффектов является библиотека Scriptaculous, которая предназначалась для работы в составе фреймворка Prototype. За дополнительной информацией обращайтесь по адресу http://script.aculo.us/ и http://scripty2.com/.

Модуль «CSS3 Transitions» определяет еще один способ реализации анимационных эффектов с помощью таблиц стилей, полностью устраняющий необходимость писать программный код. Например, вместо функции

можно было бы определить правило CSS, как показано ниже:

Это правило говорит, что всякий раз, когда изменяется непрозрачность элемента с классом «fadeable», это изменение должно протекать плавно (от текущего до нового значения) в течение половины секунды с использованием нелинейной функции перехода. Модуль «CSS Transitions» еще не был стандартизован, но его положения уже реализованы в броузерах Safari и Chrome в виде свойства

. На момент написания этих строк в Firefox 4 также была добавлена поддержка свойства -.

16.4. Вычисленные стили

Свойство

элемента опредёляет встроенный стиль элемента. Оно имеет преимущество перед всеми таблицами стилей и с успехом может применяться для установки CSS-свойств для изменения визуального представления элемента. Однако в общем случае к нему нет смысла обращаться, когда требуется узнать фактически примененные к элементу стили. То, что требуется в этом случае, называется вычисленным стилем. Вычисленный стиль элемента - это набор значений свойств, которые броузер получил (или вычислил) из встроенного стиля и всех правил из всех таблиц стилей, которые применяются к элементу: это набор свойств, фактически используемый при отображении элемента. Подобно встроенным стилям, вычисленные стили представлены объектом . Однако в отличие от встроенных стилей, вычисленные стили доступны только для чтения. Эти стили нельзя изменить, но вычисленный объект позволяет точно узнать значения свойств стилей, которые броузер использовал при отображении соответствующего элемента.

Получить вычисленный стиль элемента можно с помощью метода

объекта . Первым аргументом этому методу передается элемент, вычисленный стиль которого требуется вернуть. Второй аргумент является обязательным, и в нем обычно передается значение null или пустая строка, но в нем также может передаваться строка с именем псевдоэлемента CSS, таким как «:before», «:after», «:first-line» или «:first-letter»:

Возвращаемым значением метода

является объект , представляющий все стили, применяемые к указанному элементу (или псевдоэлементу). Между объектами , представляющими встроенные стили и вычисленные стили, существует множество существенных отличий:

• Свойства вычисленного стиля доступны только для чтения.

• Свойства вычисленных стилей имеют абсолютные значения: относительные единицы измерения, такие как проценты и пункты, преобразуются в абсолютные значения. Любое свойство, которое определяет размер (например, ширина поля или размер шрифта) будет иметь значение, выраженное в пикселах. То есть его значением будет строка с суффиксом «рх», поэтому вам необходимо будет реализовать ее синтаксический анализ, зато не придется беспокоиться об определении и преобразовании единиц измерений. Значения свойств, определяющих цвет, будут возвращаться в формате «rgb(#,#,#)» или «rgba(#,#,#,#)».

• Свойства, являющиеся краткой формой записи, не вычисляются - только фундаментальные свойства, на которых они основаны. Например, не следует пытаться получить значение свойства

, вместо этого нужно обращаться к свойствам , и т. д.

• Свойство

вычисленного стиля не определено.

Вычисленные и встроенные стили можно использовать совместно. В примере 16.4 определяются функции

и Первая читает и анализирует вычисленный размер текста указанного элемента; вторая читает и анализирует вычисленный цвет фона элемента. Затем обе функции умножают полученное значение на заданное число и устанавливают результат, как встроенный стиль элемента. (Эти функции не работают в ІЕ8 и в более ранних версиях: как вы узнаете далее, эти версии ІЕ не поддерживают метод .)

Пример 16.4 Определение вычисленных стилей и установка встроенных стилей