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

**********************************

Напомню, что некоторые CSS-свойства, такие как

<b>margin</b>
, представляют собой сокращенную форму записи других свойств, таких как
<b>margin-top, margin-right, margin-bottom</b>
и
<b>margin-left</b>
. Объект
<b>CSSStyleDeclaration</b>
имеет свойства, соответствующие этим сокращенным формам записи свойств. Например, свойство
<b>margin</b>
можно установить следующим образом:

<b>е.style.margin = topMargin + &quot;рх &quot; + rightMargin + &quot;рх &quot; + </b>

<b>                 bottomMargin + &quot;рх ” + leftMargin + &quot;рх&quot;;</b>

Хотя, возможно, кому-то будет проще установить четыре свойства полей по отдельности:

<b>е.style.marginTop = topMargin + &quot;рх&quot;; </b>

<b>е.style.marginRight = rightMargin + &quot;рх&quot;; </b>

<b>e.style.marginBottom = bottomMargin + ”px&quot;; </b>

<b>e.style.marginLeft = leftMargin + &quot;px&quot;;</b>

Атрибут

<b>style</b>
HTML-элемента - это его встроенный стиль, и он переопределяет любые правила стилей в таблице CSS. Встроенные стили в целом удобно использовать для установки значений стиля, и именно такой подход использовался во всех примерах выше. Сценарии могут читать свойства объекта
<b>CSSStyleDeclaration</b>
, представляющего встроенные стили, но они возвращают осмысленные значения, только если были ранее установлены сценарием на языке JavaScript или если HTML-элемент имеет встроенный атрибут
<b>style</b>
, установивший нужные свойства. Например, документ может включать таблицу стилей, устанавливающую левое поле для всех абзацев равным 30 пикселам, но если прочитать свойство
<b>leftMargin</b>
одного из этих элементов, будет получена пустая строка, если только этот абзац не имеет атрибут
<b>style</b>
, переопределяющий значение, установленное таблицей стилей.

Чтение встроенного стиля элемента представляет особую сложность, когда выполняется чтение свойств стиля, имеющих единицы измерения, а также свойств сокращенной формы записи: сценарий должен включать далеко не простую реализацию синтаксического анализа строк с CSS-стилями, чтобы обеспечить возможность извлечения и дальнейшего использования значений. В целом, встроенный стиль элемента удобно использовать только для установки стилей. Если сценарию потребуется получить стиль элемента, лучше использовать вычисленные стили, которые обсуждаются в разделе 16.4.

Иногда бывает проще прочитать или записать единственную строку во встроенный стиль элемента, чем обращаться к объекту

<b>CSSStyleDeclaration</b>
. Для этого можно использовать методы
<b>getAttribute()</b>
и
<b>setAttribute()</b>
объекта
<b>Elemen</b>
t или свойство
<b>cssText</b>
объекта
<b>CSSStyleDeclaration</b>
:

<b>// Обе инструкции, следующие ниже, записывают в атрибут style </b>

<b>// элемента е строку s: </b>

<b>е. setAttributefstyle&quot;, s); </b>

<b>е.style.cssText = s;</b>

<b>// Обе инструкции, следующие ниже, получают значение атрибута style </b>

<b>// элемента е в виде строки: </b>

<b>s = е.getAttribute(&quot;style&quot;); </b>

<b>s = е.style.cssText:</b>

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

Одной из наиболее типичных областей применения CSS является воспроизведение визуальных анимационных эффектов. Реализовать их можно с помощью метода

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

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

<b>// Делает элемент е относительно позиционируемым и перемещает его влево и вправо.</b>

<b>// Первым аргументом может быть объект элемента или значение атрибута id требуемого </b>

<b>// элемента. Если во втором аргументе передать функцию, она будет вызвана с элементом е </b>

<b>// в виде аргумента по завершении воспроизведения анимации. Третий аргумент определяет </b>

<b>// величину смещения элемента е. По умолчанию принимает значение 5 пикселов.</b>

<b>// Четвертый аргумент определяет, как долго должен воспроизводиться эффект.</b>

<b>// По умолчанию эффект длится 500 мсек, </b>

<b>function shake(e, oncomplete, distance, time) {</b>

<b>  // Обработка аргументов</b>

<b>  if (typeof e === &quot;string&quot;) e = document.getElementByld(e);</b>

<b>  if (!time) time = 500; </b>

<b>  if (!distance) distance = 5;</b>

<b>  var originalStyle = e.style.cssText; // Сохранить оригинальный стиль e</b>