16.3. Управление встроенными стилями

Самый простой способ управления стилями CSS - это манипулирование атрибутом style отдельных элементов документа. Как и для большинства HTML-атрибутов, атрибуту style соответствует одноименное свойство объекта Element, и им можно манипулировать в сценариях на языке JavaScript. Однако свойство style имеет одну отличительную особенность: его значением является не строка, а объект CSSStyleDeclaration. Свойства этого объекта представляют CSS-свойства, определенные в HTML-атрибуте style. Например, чтобы вывести содержимое текстового элемента е крупным, полужирным шрифтом синего цвета, можно выполнить следующие операции для записи желаемых значений в свойства, которые соответствуют свойствам стиля font-size, font-weight и color:

е.style.fontSize = "24pt"; e.style.fontWeight = "bold"; e.style.color = "blue";

При работе со свойствами стиля объекта CSSStyleDeclaration не забывайте, что все значения должны задаваться в виде строк. В таблице стилей или атрибуте style можно написать:

position: absolute;

font-family: sans-serif;

background-color: №ffffff;

Чтобы сделать то же самое для элемента е в JavaScript, необходимо заключить все значения в кавычки:

е.style.position = "absolute";

е.style.fontFamily = "sans-serif";

e.style.backgroundColor = "flffffff";

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

Кроме того, помните, что во всех свойствах позиционирования должны быть указаны единицы измерения. То есть нельзя устанавливать свойство left подобным образом:

е.style.left = 300; // Неправильно: это число, а не строка

е.style.left = "300"; // Неправильно: отсутствуют единицы измерения

Единицы измерения обязательны при установке свойств стиля в JavaScript - так же, как при установке свойств стиля в таблицах стилей. Ниже приводится правильный способ установки значения свойства left элемента е, равным 300 пикселам:

е.style.left = "300px";

Чтобы установить свойство left равным вычисляемому значению, обязательно добавьте единицы измерения в конце вычислений:

е.style.left = (х0 + left_margin + left_border + left_padding) + "px";

Как побочный эффект, добавление строки с единицами измерения преобразует вычисленное значение из числа в строку.

Соглашения об именах: CSS-свойства в JavaScript

Многие CSS-свойства стиля, такие как font-size, содержат в своих именах дефис. В языке JavaScript дефис интерпретируется как знак минус, поэтому нельзя записать выражение, приведенное ниже:

е.style.font-size = "24pt"; // Синтаксическая ошибка!

Таким образом, имена свойств объекта CSSStyleDeclaration слегка отличаются от имен реальных CSS-свойств. Если имя CSS-свойства содержит дефисы, имя свойства объекта CSSStyleDeclaration образуется путем удаления дефисов и перевода в верхний регистр буквы, непосредственно следующей за каждым из них. Другими словами, CSS-свойство border-left-width доступно через свойство borderLeftWidth, а к CSS-свойству font-family можно обратиться следующим образом:

е. 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() объекта Element или свойство cssText объекта CSSStyleDeclaration:

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

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

е. setAttributefstyle", s);

е.style.cssText = s;

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

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

s = е.getAttribute("style");

s = е.style.cssText: