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

Иногда бывает проще прочитать или записать единственную строку во встроенный стиль элемента, чем обращаться к объекту CSSStyleDeclaration. Для этого можно использовать методы getAttribute и setAttribute объекта Elemen t или свойство cssText объекта CSSStyleDeclaration:

  // Обе инструкции, следующие ниже, записывают в атрибут style
// элемента е строку s:
  е. setAttributefstyle", s);
  е.style.cssText = s;

  // Обе инструкции, следующие ниже, получают значение атрибута style
  // элемента е в виде строки:
  s = е.getAttribute("style");
  s = е.style.cssText:

16.3.1. Создание анимационных эффектов средствами CSS

Одной из наиболее типичных областей применения CSS является воспроизведение визуальных анимационных эффектов. Реализовать их можно с помощью метода setTimeout или setlnterval (раздел 14.1), используя их для организации многократных вызовов функции, изменяющей встроенный стиль элемента. Пример 16.3 демонстрирует две такие функции, shake и fadeOut. Функция shake перемещает, или «встряхивает» (shakes), элемент из стороны в сторону. Ее можно использовать, например, для привлечения внимания пользователя в случае ввода некорректных данных. Функция fadeOut уменьшает непрозрачность элемента в течение указанного периода времени (по умолчанию 500 миллисекунд), вызывая эффект его растворения до полного исчезновения.

Пример 16.3. Воспроизведение анимационных эффектов средствами CSS

  // Делает элемент е относительно позиционируемым и перемещает его влево и вправо.
  // Первым аргументом может быть объект элемента или значение атрибута id требуемого
  // элемента. Если во втором аргументе передать функцию, она будет вызвана с элементом е
  // в виде аргумента по завершении воспроизведения анимации. Третий аргумент определяет
  // величину смещения элемента е. По умолчанию принимает значение 5 пикселов.
  // Четвертый аргумент определяет, как долго должен воспроизводиться эффект.
  // По умолчанию эффект длится 500 мсек,
  function shake(e, oncomplete, distance, time) {
   // Обработка аргументов
   if (typeof e === "string") e = document.getElementByld(e);
   if (!time) time = 500;
   if (!distance) distance = 5;

var originalStyle = e.style.cssText; // Сохранить оригинальный стиль e
   e.style.position = "relative"; // Сделать относит, позиционируемым

   var start = (new Date).getTime; // Запомнить момент начала анимации ;
   animate // Запустить анимацию

   // Эта функция проверяет прошедшее время и изменяет координаты е.
   // Если анимацию пора завершать, восстанавливает первоначальное состояние
   // элемента е. Иначе изменяет координаты е и планирует следующий свой вызов,
   function animate {
   var now = (new Date).getTime; // Получить текущее время
   var elapsed = now-start; // Сколько прошло времени с начала?
   var fraction = elapsed/time; // Доля от требуемого времени?
   if (fraction < 1) { // Если рано завершать анимацию
   // Вычислить координату х элемента е как функцию от доли общего
   // времени анимации. Здесь используется синусоидальная функция,
   // а доля общего времени воспроизведения умножается на 4pi,
   // поэтому перемещение взад и вперед выполняется дважды,
   var x = distance * Math.sin(fraction*4*Math.PI);
   e.style.left = x + "px";
   // Попробовать вызвать себя через 25 мсек или в конце запланированного
   // отрезка общего времени воспроизведения. Мы стремимся сделать
   // анимацию гладкой, воспроизводя ее со скоростью 40 кадров/сек.
   setTimeout(animate, Math.min(25, time-elapsed));
   }
   else { // Иначе анимацию пора завершать
   e.style.cssText = originalStyle // Восстановить первонач. стиль
   if (oncomplete) oncomplete(e); // Вызвать ф-цию обратного вызова
   }
   }
  }

  // Растворяет е от состояния полной непрозрачности до состояния полной прозрачности
  // за указанное количество миллисекунд. Предполагается, что, когда вызывается
  // эта функция, е полностью непрозрачен, oncomplete - необязательная функция,