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

Флэнаган Дэвид

е. style. fontFamily = "sans-serif;

Кроме того, когда CSS-свойство, такое как

float

, имеет имя, совпадающее с зарезервированным словом языка JavaScript, к этому имени добавляется префикс «css», чтобы создать допустимое имя свойства объекта

CSSStyleDeclaration

. То есть, чтобы прочитать или изменить значение CSS-свойства

float

элемента, следует использовать свойство

cssFloat

объекта

CSSStyleDeclaration

.

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

Напомню,

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

margin

, представляют собой сокращенную форму записи других свойств, таких как

margin-top, margin-right, margin-bottom

и

margin-left

. Объект

CSSStyleDeclaration

имеет свойства, соответствующие этим сокращенным формам записи свойств. Например, свойство

margin

можно установить следующим образом:

е.style.margin = topMargin + "рх " + rightMargin + "рх " +

bottomMargin + "рх ” + leftMargin + "рх";

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

е.style.marginTop = topMargin + "рх";

е.style.marginRight = rightMargin + "рх";

e.style.marginBottom = bottomMargin + ”px";

e.style.marginLeft = leftMargin + "px";

Атрибут

style

HTML-элемента - это его встроенный стиль, и он переопределяет любые правила стилей в таблице CSS. Встроенные стили в целом удобно использовать для установки значений стиля, и именно такой подход использовался во всех примерах выше. Сценарии могут читать свойства объекта

CSSStyleDeclaration

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

style

, установивший нужные свойства. Например, документ может включать таблицу стилей, устанавливающую левое поле для всех абзацев равным 30 пикселам, но если прочитать свойство

leftMargin

одного из этих элементов, будет получена пустая строка, если только этот абзац не имеет атрибут

style

, переопределяющий значение, установленное таблицей стилей.

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

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

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);