Глава 4.10. Динамическое управление стилями

4.10.1. Способы доступа к стилям

DOM 2 содержит специальный интерфейс CSSStyleDeclaration, который предназначен для описания блоков деклараций CSS. Этот интерфейс используется и для описания содержимого правил CSS, и для описания стилей отдельных элементов дерева документа. Он имеет чрезмерно усложненную, на наш взгляд, структуру и обеспечивает три разных способа доступа к отдельным свойствам CSS, а именно:

  1. чтение и запись свойств, при которых и название свойства, и его значение задаются текстовой строкой согласно правилам CSS;
  2. чтение и запись свойств, при которых название свойства, задается текстовой строкой согласно правилам CSS, а значение является объектом специального типа CSSValue;
  3. чтение и запись свойств, при которых свойство задается соответствующим атрибутом объекта CSSStyleDeclaration, а его значение задается текстовой строкой согласно правилам CSS.

Пусть, например, мы хотим сделать фон тела документа красным. Соответствующие операторы будут выглядеть так:

document.body.style.setProperty("background-color", "red", "");
document.body.style.backgroundColor = "red";

Первый оператор использует имя свойства CSS, а второй — соответствующее свойство объекта document.body.style. Для чтения цвета фона возможны три варианта:

var clr1 = document.body.style.getPropertyValue("background-color");
var clr2 = document.body.style.getPropertyCSSValue("background-color");
var clr3 = document.body.style.backgroundColor;

Здесь clr1 и clr3 получат тип String, а clr2 — тип CSSValue. DOM 2 объявил первые два способа обязательными, а третий (называемый интерфейсом CSS2Properties) — факультативным. Однако, разработчики обозревателей расставили приоритеты иначе: и MSHTML, и Gecko поддерживают именно третий интерфейс. MSHTML этим ограничивается, а Gecko поддерживает свойства и методы CSSStyleDeclaration, но пока не поддерживает CSSValue. Тем не менее мы приводим описание всех интерфейсов DOM, поскольку следующие версии обозревателей, скорее всего, обеспечат их реализацию.

4.10.2. Значение свойства CSS: интерфейс CSSValue

Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Интерфейс CSSValue соответствует значению одного свойства CSS. Он имеет два свойства:

Свойства интерфейса CSSValue
Свойство Изменяемое Модель Описание
cssText Да DOM 2 Текст значения.
cssValueType Нет DOM 2 Тип значения.

Свойство cssText

Синтаксис:  объект.cssText
Изменяемое: да
Иcключения: SYNTAX_ERR, INVALID_MODIFICATION_ERR,
            NO_MODIFICATION_ALLOWED_ERR (при записи)
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Свойство cssText позволяет читать и задавать значение свойства в виде строки DOMString.

Свойство cssValueType

Синтаксис:  объект.cssValueType
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

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

Таблица 4.6. Типы значений свойств CSS
Название Значение Описание
CSS_INHERIT 0 Наследуемое значение. cssText равно "inherit".
CSS_PRIMITIVE_VALUE 1 Примитивное значение. См. интерфейс CSSPrimitiveValue.
CSS_VALUE_LIST 2 Список значений. См. интерфейс CSSValueList.
CSS_CUSTOM 3 Прочие значения.

4.10.3. Примитивное значение свойства: интерфейс CSSPrimitiveValue

Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Интерфейс CSSPrimitiveValue соответствует примитивному значению свойства CSS. Он является производным от CSSValue и имеет следующие дополнительные свойства и методы:

Свойства интерфейса CSSPrimitiveValue
Свойство Изменяемое Модель Описание
primitiveType Нет DOM 2 Тип примитивного значения.
Методы интерфейса CSSPrimitiveValue
Метод Модель Описание
getCounterValue DOM 2 Возвращает значение счетчика.
getFloatValue DOM 2 Возвращает числовое значение.
getRectValue DOM 2 Возвращает значение прямоугольника.
getRGBColorValue DOM 2 Возвращает RGB-значение цвета.
getStringValue DOM 2 Возвращает строковое значение.
setFloatValue DOM 2 Задает числовое значение.
setStringValue DOM 2 Задает строковое значение.

Свойство primitiveType

Синтаксис:  объект.primitiveType
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Свойство primitiveType возвращает целое число, означающее тип данного примитивного значения в соответствии со следующей таблицей:

Таблица 4.7. Типы примитивных значений свойств CSS
Название Значение Описание
CSS_UNKNOWN 0 Неопознанное значение.
CSS_NUMBER 1 Число.
CSS_PERCENTAGE 2 Процентное значение.
CSS_EMS 3 Размер в em.
CSS_EXS 4 Размер в ex.
CSS_PX 5 Размер в пикселях (px).
CSS_CM 6 Размер в см.
CSS_MM 7 Размер в мм.
CSS_IN 8 Размер в дюймах.
CSS_PT 9 Размер в точках (pt).
CSS_PC 10 Размер в пиках (pc).
CSS_DEG 11 Угол в градусах.
CSS_RAD 12 Угол в радианах.
CSS_GRAD 13 Угол в градах.
CSS_MS 14 Время в мсек.
CSS_S 15 Время в сек.
CSS_HZ 16 Частота в Гц.
CSS_KHZ 17 Частота в кГц.
CSS_DIMENSION 18 Число с неизвестной единицей измерения.
CSS_STRING 19 Строка.
CSS_URI 20 URI.
CSS_IDENT 21 Идентификатор.
CSS_ATTR 22 Функция attr(x).
CSS_COUNTER 23 Счетчик.
CSS_RECT 24 Прямоугольник rect(top, right, bottom, left)
CSS_RGBCOLOR 25 Цвет.

Метод getCounterValue

Синтаксис:  объект.getCounterValue()
Результат:  значение типа Counter
Иcключения: INVALID_ACCESS_ERR
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Метод getCounterValue возвращает объект Counter, содержащий значение счетчика. Если primitiveType отличен от CSS_COUNTER, то генерируется исключение.

Метод getFloatValue

Синтаксис:  объект.getFloatValue(unitType)
Аргументы:  unitType — числовое выражение
Результат:  числовое значение
Иcключения: INVALID_ACCESS_ERR
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Метод getFloatValue возвращает числовое значение объекта, приведенное к единице измерения unitType, которая должна иметь одно из следующих значений: CSS_NUMBER, CSS_PERCENTAGE, CSS_EMS, CSS_EXS, CSS_PX, CSS_CM, CSS_MM, CSS_IN, CSS_PT, CSS_PC, CSS_DEG, CSS_RAD, CSS_GRAD, CSS_MS, CSS_S, CSS_HZ, CSS_KHZ, CSS_DIMENSION. Если значение не является числовым или не может быть преобразовано к заданной единице измерения, то генерируется исключение.

Метод getRectValue

Синтаксис:  объект.getRectValue()
Результат:  значение типа Rect
Иcключения: INVALID_ACCESS_ERR
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Метод getRectValue возвращает объект Rect, содержащий значение прямоугольника. Если primitiveType отличен от CSS_RECT, то генерируется исключение.

Метод getRGBColorValue

Синтаксис:  объект.getRGBColorValue()
Результат:  значение типа RGBColor
Иcключения: INVALID_ACCESS_ERR
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Метод getRGBColorValue возвращает объект RGBColor, содержащий значение цвета. Если primitiveType отличен от CSS_RGBCOLOR, то генерируется исключение.

Метод getStringValue

Синтаксис:  объект.getStringValue()
Результат:  значение типа DOMString
Иcключения: INVALID_ACCESS_ERR
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Метод getStringValue возвращает строковое значение объекта. primitiveType должен указывать на строковый тип значения (т. е. иметь одно из следующих значений: CSS_STRING, CSS_URI, CSS_IDENT или CSS_ATTR). В противном случае генерируется исключение.

Метод setFloatValue

Синтаксис:  объект.setFloatValue(unitType, value)
Аргументы:  unitType, value — числовые выражения
Иcключения: INVALID_ACCESS_ERR, NO_MODIFICATION_ALLOWED_ERR
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Метод setFloatValue задает новое числовое значение value с единицей измерения unitType, которая должна иметь одно из следующих значений: CSS_NUMBER, CSS_PERCENTAGE, CSS_EMS, CSS_EXS, CSS_PX, CSS_CM, CSS_MM, CSS_IN, CSS_PT, CSS_PC, CSS_DEG, CSS_RAD, CSS_GRAD, CSS_MS, CSS_S, CSS_HZ, CSS_KHZ, CSS_DIMENSION. Если данное свойство не может принимать значений такого типа или с такой единицей измерения, то генерируется исключение.

Метод setStringValue

Синтаксис:  объект.setStringValue(stringType, value)
Аргументы:  stringType — числовое выражение
            value — выражение типа DOMString
Иcключения: INVALID_ACCESS_ERR, NO_MODIFICATION_ALLOWED_ERR
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Метод setStringValue задает новое строковое значение value. Аргумент stringType должен иметь одно из следующих значений: CSS_STRING, CSS_URI, CSS_IDENT или CSS_ATTR. Если данное свойство не может принимать значений такого типа, то генерируется исключение.

4.10.4. Списки свойств: интерфейс CSSValueList

Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Интерфейс CSSValueList реализует упорядоченные списки свойств CSS. Он имеет единственное свойство length, возвращающее количество свойств в списке, и единственный метод item, возвращающий элемент списка с заданным номером (элементы списка нумеруются, начиная с нуля). Пустой список означает, что соответствующее свойство имеет значение none.

Свойство length

Синтаксис:  список.length
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Свойство length возвращает количество элементов в данном списке. Допустимые индексы элементов списка лежат в диапазоне от 0 до length-1 включительно.

Метод item

Синтаксис:  список.item(index)
Аргументы:  index — числовое выражение
Результат:  объект CSSValue или null
Исключения: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Метод item возвращает элемент списка свойств с заданным индексом в качестве результата. Если индекс выходит за пределы диапазона элементов списка, то возвращается null.

4.10.5. Цвет: интерфейс RGBColor

Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Интерфейс RGBColor соответствует цветам CSS. Он имеет три свойства, возвращающих числовые значения RGB-составляющих данного цвета:

Свойства интерфейса RGBColor
Свойство Изменяемое Модель Описание
blue Нет DOM 2 Синий цвет.
green Нет DOM 2 Зеленый цвет.
red Нет DOM 2 Красный цвет.

Свойство blue

Синтаксис:  объект.blue
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Свойство blue возвращает значение синего цвета типа CSSPrimitiveValue в диапазоне от 0 до 255 или от 0% до 100%.

Свойство green

Синтаксис:  объект.green
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Свойство green возвращает значение зеленого цвета типа CSSPrimitiveValue в диапазоне от 0 до 255 или от 0% до 100%.

Свойство red

Синтаксис:  объект.red
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Свойство red возвращает значение красного цвета типа CSSPrimitiveValue в диапазоне от 0 до 255 или от 0% до 100%.

4.10.6. Прямоугольник: интерфейс Rect

Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Интерфейс Rect соответствует прямоугольникам CSS. Он имеет четыре свойства, возвращающих координаты данного прямоугольника:

Свойства интерфейса Rect
Свойство Изменяемое Модель Описание
bottom Нет DOM 2 Нижняя координата.
left Нет DOM 2 Левая координата.
right Нет DOM 2 Правая координата.
top Нет DOM 2 Верхняя координата.

Свойство bottom

Синтаксис:  объект.bottom
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Свойство bottom возвращает нижнюю координату прямоугольника типа CSSPrimitiveValue.

Свойство left

Синтаксис:  объект.left
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Свойство left возвращает левую координату прямоугольника типа CSSPrimitiveValue.

Свойство right

Синтаксис:  объект.right
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Свойство right возвращает правую координату прямоугольника типа CSSPrimitiveValue.

Свойство top

Синтаксис:  объект.top
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Свойство top возвращает верхнюю координату прямоугольника типа CSSPrimitiveValue.

4.10.7. Счетчик: интерфейс Counter

Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Интерфейс Counter соответствует счетчикам CSS. Он имеет следующие свойства:

Свойства интерфейса Counter
Свойство Изменяемое Модель Описание
identifier Нет DOM 2 Идентификатор счетчика.
listStyle Нет DOM 2 Стиль счетчика.
separator Нет DOM 2 Разделитель счетчиков.

Свойство identifier

Синтаксис:  объект.identifier
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Свойство identifier возвращает идентификатор счетчика типа DOMString.

Свойство listStyle

Синтаксис:  объект.listStyle
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Свойство listStyle возвращает стиль счетчика типа DOMString.

Свойство separator

Синтаксис:  объект.separator
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Свойство separator возвращает разделитель типа DOMString, который используется между вложенными счетчиками.

4.10.8. Декларация стиля CSS: интерфейс CSSStyleDeclaration

Поддержка: Internet Explorer Не поддерживается.
           Gecko Поддерживается частично.

Интерфейс CSSStyleDeclaration предназначен для описания блоков деклараций CSS. Более подробно мы обсудили его в п. 4.10.1.

Свойства интерфейса CSSStyleDeclaration
Свойство Изменяемое Модель Описание
cssText Да DOM 2 Текст декларации стиля.
length Нет DOM 2 Количество явно заданных свойств.
parentRule Нет DOM 2 Правило CSS, содержащее данную декларацию.
Методы интерфейса CSSStyleDeclaration
Метод Модель Описание
getPropertyCSSValue DOM 2 Возвращает CSSValue, содержащее значение свойства.
getPropertyPriority DOM 2 Возвращает приоритет свойства.
getPropertyValue DOM 2 Возвращает строку, содержащую значение свойства.
item DOM 2 Возвращает имя свойства с заданным номером.
removeProperty DOM 2 Удаляет свойство.
setProperty DOM 2 Задает значение и приоритет свойства.

Свойство cssText

Синтаксис:  объект.cssText
Изменяемое: да
Иcключения: SYNTAX_ERR, NO_MODIFICATION_ALLOWED_ERR (при записи)
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Всегда пустая строка.

Свойство cssText соответствуют тексту декларации свойств в виде строки DOMString (без окружающих ее фигурных скобок). При задании этого свойства старые значения всех свойств CSS в декларации удаляются и заменяются на новые. Пример: сценарий

document.body.style.cssText = "font-size: 8px; font-family: Arial";
alert(document.body.style.cssText);

выведет в Internet Explorer строку FONT-SIZE: 8px; FONT-FAMILY: Arial, а в Gecko — пустую строку.

Свойство length

Синтаксис:  объект.length
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Поддерживается частично.

Свойство length возвращает количество свойств, явно заданных в данном блоке деклараций. Пример:

alert(document.styleSheets[0].cssRules[0].style.length);

Свойство parentRule

Синтаксис:  объект.parentRule
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Если данная декларация содержится в таблице стилей, то свойство parentRule возвращает объект CSSRule, содержащий ее. В противном случае возвращается null. Пример:

alert(document.styleSheets[0].cssRules[0].style.parentRule);

Метод getPropertyCSSValue

Синтаксис:  объект.getPropertyCSSValue(propertyName)
Аргументы:  propertyName — выражение типа DOMString
Результат:  значение типа CSSValue или null
Поддержка: Internet Explorer Не поддерживается.
           Gecko Всегда возвращает null.

Метод getPropertyCSSValue возвращает объект CSSValue, содержащий значение свойства propertyName. Если propertyName является сокращением, то возвращается null. Пример:

var rule = document.styleSheets[0].cssRules[0];
alert(rule.style.getPropertyCSSValue("font-size").cssText);

Метод getPropertyPriority

Синтаксис:  объект.getPropertyPriority(propertyName)
Аргументы:  propertyName — выражение типа DOMString
Результат:  значение типа DOMString
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Метод getPropertyPriority возвращает приоритет свойства propertyName. Его результатом может быть либо пустая строка, либо строка "!important", соответствующая атрибуту CSS !important. Пример:

var rule = document.styleSheets[0].cssRules[0];
alert(rule.style.getPropertyPriority("font-size"));

Метод getPropertyValue

Синтаксис:  объект.getPropertyValue(propertyName)
Аргументы:  propertyName — выражение типа DOMString
Результат:  значение типа DOMString
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Метод getPropertyValue возвращает строку, содержащую значение свойства propertyName. Пример:

var rule = document.styleSheets[0].cssRules[0];
alert(rule.style.getPropertyValue("font-size"));

Метод item

Синтаксис:  объект.item(index)
Аргументы:  index — числовое выражение
Результат:  значение типа DOMString
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Метод item возвращает строку, содержащую имя свойства с номером index. Пример:

alert(document.body.style.item(0));

Метод removeProperty

Синтаксис:  объект.removeProperty(propertyName)
Аргументы:  propertyName — выражение типа DOMString
Результат:  значение типа DOMString
Иcключения: NO_MODIFICATION_ALLOWED_ERR
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Метод removeProperty удаляет свойство propertyName и возвращает его значение. Если свойство с этим именем не было явно задано в декларации, то возвращается пустая строка. Пример:

var rule = document.styleSheets[0].cssRules[0];
alert(rule.style.removeProperty("font-size"));

Метод setProperty

Синтаксис:  объект.setProperty(propertyName, value, priority)
Аргументы:  propertyName, value, priority — выражения типа DOMString
Результат:  значение типа DOMString
Иcключения: SYNTAX_ERR, NO_MODIFICATION_ALLOWED_ERR
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Метод setProperty задает значение и приоритет свойства propertyName. Значение свойства задается аргументом value, а приоритет — аргументом priority, который может быть либо строкой "!important", либо пустой строкой. Примеры:

document.body.style.setProperty("color", "red", "!important");
document.body.style.setProperty("background-color", "green", "");

4.10.9. Свойства CSS: интерфейс CSS2Properties

Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Интерфейс CSS2Properties является расширением интерфейса CSSStyleDeclaration, необязательным для реализации DOM. Тем не менее его поддерживают оба рассматриваемых нами обозревателя. Он обеспечивает чтение и запись свойств CSS через дополнительные свойства объекта CSSStyleDeclaration, имена которых соответствуют именам свойств CSS с поправкой на синтаксис языков программирования. Примеры его использования приведены в п. 4.10.1. Полный перечень свойств этого интерфейса и описание их поддержки обозревателями вы найдете в Приложении 16.

4.10.10. Специфицированные и вычисленные значения свойств

Вспомним, как спецификация CSS описывает порядок вычисления значений свойств CSS для каждого элемента в дереве документа. Сначала значение определяется из спецификации (специфицированное значение), затем при необходимости преобразуется к абсолютному значению (вычисленное значение), и, наконец, преобразуется с учетом ограничений контекста (фактическое значение).

DOM 2 предусматривает возможность доступа к специфицированным и вычисленным значениям свойств. Для чтения и изменения специфицированных значений должен использоваться метод getOverrideStyle объекта Document, а для чтения вычисленных значений — метод getComputedStyle объекта AbstractView (т. е. в современных реализациях объекта window).

Метод getOverrideStyle

Синтаксис:  документ.getOverrideStyle(elt, pseudoElt)
Аргументы:  elt — выражение типа Element
            pseudoElt — выражение типа DOMString
Результат:  значение типа CSSStyleDeclaration
Поддержка: Internet Explorer Не поддерживается.
           Gecko Реализовано с ошибками.

Метод getOverrideStyle возвращает объект CSSStyleDeclaration, содержащий специфицированные значения свойств стилей элемента elt. Аргумент pseudoElt должен быть именем псевдоэлемента CSS или пустой строкой. Примеры:

var os = document.getOverrideStyle(document.body, "");
os.setProperty("background-color", "green", "");

Метод getComputedStyle

Синтаксис:  окно.getComputedStyle(elt, pseudoElt)
Аргументы:  elt — выражение типа Element
            pseudoElt — выражение типа DOMString
Результат:  значение типа CSSStyleDeclaration
Поддержка: Internet Explorer Не поддерживается.
           Gecko Реализовано с ошибками.

Метод getComputedStyle возвращает объект CSSStyleDeclaration, содержащий вычисленные значения свойств стилей элемента elt. Этот объект доступен только для чтения. Аргумент pseudoElt должен быть именем псевдоэлемента CSS или пустой строкой. Примеры:

var os = window.getComputedStyle(document.body, "");
alert(os.getProperty("background-color"));

В Internet Explorer доступ к специфицированным и вычисленным значениям свойств реализован иначе. Каждый HTML-элемент имеет помимо свойства style еще два свойства: runtimeStyle, содержащий его специфицированные свойства, и currentStyle, содержащий его вычисленные свойства. Оба эти свойства возвращают объект типа CSS2Properties. Примеры:

document.body.runtimeStyle.backgroundColor = "green";
alert(document.body.currentStyle.backgroundColor);