e.style.opacity = "0"; // Сделать е полностью прозрачным
if (oncomplete) oncomplete(e); // Вызвать ф-цию обратного вызова
}
}
}
Обе функции,
shake
и
fadeOut,
принимают необязательную функцию обратного вызова во втором аргументе. Если эта функция указана, она будет вызвана по завершении воспроизведения анимационного эффекта. Элемент, к которому применялся анимационный эффект, будет передан функции обратного вызова в виде аргумента. Следующая разметка HTML создает кнопку, для которой после щелчка на ней воспроизводится эффект встряхивания, а затем эффект растворения:
<button onclick="shake(this, fadeOut);">Встряхнуть и pacтворить</button>
Обратите внимание, насколько функции
shake
и
fade0ut
похожи друг на друга. Они обе могут служить шаблонами для реализации похожих анимационных эффектов с использованием CSS-свойств. Однако клиентские библиотеки, такие как jQuery, обычно поддерживают набор предопределенных визуальных эффектов, поэтому вам вообще может никогда не потребоваться писать собственные функции воспроизведения анимационных эффектов, такие как
shake,
если только вам не понадобится создать какой-нибудь сложный визуальный эффект. Одной из первых и наиболее примечательных библиотек визуальных эффектов является библиотека Scriptaculous, которая предназначалась для работы в составе фреймворка Prototype. За дополнительной информацией обращайтесь по адресуи http://scripty2.com/.
Модуль «CSS3 Transitions» определяет еще один способ реализации анимационных эффектов с помощью таблиц стилей, полностью устраняющий необходимость писать программный код. Например, вместо функции
fadeOut
можно было бы определить правило CSS, как показано ниже:
.fadeable { transition: opacity .5s ease-in }
Это правило говорит, что всякий раз, когда изменяется непрозрачность элемента с классом «fadeable», это изменение должно протекать плавно (от текущего до нового значения) в течение половины секунды с использованием нелинейной функции перехода. Модуль «CSS Transitions» еще не был стандартизован, но его положения уже реализованы в броузерах Safari и Chrome в виде свойства
– webkit-transition
. На момент написания этих строк в Firefox 4 также была добавлена поддержка свойства -
moz-transition
.
16.4. Вычисленные стили
Свойство
style
элемента опредёляет встроенный стиль элемента. Оно имеет преимущество перед всеми таблицами стилей и с успехом может применяться для установки CSS-свойств для изменения визуального представления элемента. Однако в общем случае к нему нет смысла обращаться, когда требуется узнать фактически примененные к элементу стили. То, что требуется в этом случае, называется вычисленным стилем. Вычисленный стиль элемента - это набор значений свойств, которые броузер получил (или вычислил) из встроенного стиля и всех правил из всех таблиц стилей, которые применяются к элементу: это набор свойств, фактически используемый при отображении элемента. Подобно встроенным стилям, вычисленные стили представлены объектом
CSSStyleDeclaration
. Однако в отличие от встроенных стилей, вычисленные стили доступны только для чтения. Эти стили нельзя изменить, но вычисленный объект
CSSStyleDeclaration
позволяет точно узнать значения свойств стилей, которые броузер использовал при отображении соответствующего элемента.
Получить вычисленный стиль элемента можно с помощью метода
getComputedStyle
объекта
Window
. Первым аргументом этому методу передается элемент, вычисленный стиль которого требуется вернуть. Второй аргумент является обязательным, и в нем обычно передается значение null или пустая строка, но в нем также может передаваться строка с именем псевдоэлемента CSS, таким как «:before», «:after», «:first-line» или «:first-letter»:
var title = document.getElementById("section1title");
var titlestyles = window.getComputedStyle(element, null);
Возвращаемым значением метода
getComputedStyle
является объект
CSSStyleDeclaration
, представляющий все стили, применяемые к указанному элементу (или псевдоэлементу). Между объектами
CSSStyleDeclaration
, представляющими встроенные стили и вычисленные стили, существует множество существенных отличий:
• Свойства вычисленного стиля доступны только для чтения.
• Свойства вычисленных стилей имеют абсолютные значения: относительные единицы измерения, такие как проценты и пункты, преобразуются в абсолютные значения. Любое свойство, которое определяет размер (например, ширина поля или размер шрифта) будет иметь значение, выраженное в пикселах. То есть его значением будет строка с суффиксом «рх», поэтому вам необходимо будет реализовать ее синтаксический анализ, зато не придется беспокоиться об определении и преобразовании единиц измерений. Значения свойств, определяющих цвет, будут возвращаться в формате «rgb(#,#,#)» или «rgba(#,#,#,#)».
• Свойства, являющиеся краткой формой записи, не вычисляются - только фундаментальные свойства, на которых они основаны. Например, не следует пытаться получить значение свойства
margin
, вместо этого нужно обращаться к свойствам
marginLeft
,
marginTop
и т. д.
• Свойство
cssText
вычисленного стиля не определено.
Вычисленные и встроенные стили можно использовать совместно. В примере 16.4 определяются функции
scale
и
scaleColor.
Первая читает и анализирует вычисленный размер текста указанного элемента; вторая читает и анализирует вычисленный цвет фона элемента. Затем обе функции умножают полученное значение на заданное число и устанавливают результат, как встроенный стиль элемента. (Эти функции не работают в ІЕ8 и в более ранних версиях: как вы узнаете далее, эти версии ІЕ не поддерживают метод
getComputedStyle
.)
Пример 16.4 Определение вычисленных стилей и установка встроенных стилей
//Умножает размер текста элемента е на указанное число factor
function scale(e, factor) {
// Определить текущий размер текста, получив вычисленный стиль
var size = parseInt(window.getComputedStyle(e, fontSize);
// И использовать встроенный стиль, чтобы увеличить этот размер
е.style.fontSize = factor*size + "рх";
}
// Изменяет цвет фона элемента е, умножая компоненты цвета на указанное число.
// Значение factor > 1 осветляет цвет элемента, a factor < 1 затемняет его.
function scaleColor(e, factor) {
var color = window.getComputedStyle(e, "").backgroundColor; // Получить