Глава 4.10. Динамическое управление стилями
4.10.1. Способы доступа к стилям
DOM 2 содержит специальный интерфейс CSSStyleDeclaration, который предназначен для описания блоков деклараций CSS. Этот интерфейс используется и для описания содержимого правил CSS, и для описания стилей отдельных элементов дерева документа. Он имеет чрезмерно усложненную, на наш взгляд, структуру и обеспечивает три разных способа доступа к отдельным свойствам CSS, а именно:
- чтение и запись свойств, при которых и название свойства, и его значение задаются текстовой строкой согласно правилам CSS;
- чтение и запись свойств, при которых название свойства, задается текстовой строкой согласно правилам CSS, а значение является объектом специального типа CSSValue;
- чтение и запись свойств, при которых свойство задается соответствующим атрибутом объекта 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
Поддержка:Не поддерживается.
Не поддерживается.
Интерфейс CSSValue соответствует значению одного свойства CSS. Он имеет два свойства:
| Свойство | Изменяемое | Модель | Описание |
|---|---|---|---|
| cssText | Да | DOM 2 | Текст значения. |
| cssValueType | Нет | DOM 2 | Тип значения. |
Свойство cssText
Синтаксис: объект.cssText Изменяемое: да Иcключения: SYNTAX_ERR, INVALID_MODIFICATION_ERR, NO_MODIFICATION_ALLOWED_ERR (при записи)
Поддержка:
Свойство cssText позволяет читать и задавать значение свойства в виде строки DOMString.
Свойство cssValueType
Синтаксис: объект.cssValueType Изменяемое: нет
Поддержка:
Свойство cssValueType возвращает целое число, означающее тип данного значения в соответствии со следующей таблицей:
| Название | Значение | Описание |
|---|---|---|
| CSS_INHERIT | 0 | Наследуемое значение. cssText равно "inherit". |
| CSS_PRIMITIVE_VALUE | 1 | Примитивное значение. См. интерфейс CSSPrimitiveValue. |
| CSS_VALUE_LIST | 2 | Список значений. См. интерфейс CSSValueList. |
| CSS_CUSTOM | 3 | Прочие значения. |
4.10.3. Примитивное значение свойства: интерфейс CSSPrimitiveValue
Поддержка:
Интерфейс CSSPrimitiveValue соответствует примитивному значению свойства CSS. Он является производным от CSSValue и имеет следующие дополнительные свойства и методы:
| Свойство | Изменяемое | Модель | Описание |
|---|---|---|---|
| primitiveType | Нет | DOM 2 | Тип примитивного значения. |
| Метод | Модель | Описание |
|---|---|---|
| getCounterValue | DOM 2 | Возвращает значение счетчика. |
| getFloatValue | DOM 2 | Возвращает числовое значение. |
| getRectValue | DOM 2 | Возвращает значение прямоугольника. |
| getRGBColorValue | DOM 2 | Возвращает RGB-значение цвета. |
| getStringValue | DOM 2 | Возвращает строковое значение. |
| setFloatValue | DOM 2 | Задает числовое значение. |
| setStringValue | DOM 2 | Задает строковое значение. |
Свойство primitiveType
Синтаксис: объект.primitiveType Изменяемое: нет
Поддержка:
Свойство primitiveType возвращает целое число, означающее тип данного примитивного значения в соответствии со следующей таблицей:
| Название | Значение | Описание |
|---|---|---|
| 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
Поддержка:
Метод getCounterValue возвращает объект Counter, содержащий значение счетчика. Если primitiveType отличен от CSS_COUNTER, то генерируется исключение.
Метод getFloatValue
Синтаксис: объект.getFloatValue(unitType) Аргументы: unitType — числовое выражение Результат: числовое значение Иcключения: INVALID_ACCESS_ERR
Поддержка:
Метод 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
Поддержка:
Метод getRectValue возвращает объект Rect, содержащий значение прямоугольника. Если primitiveType отличен от CSS_RECT, то генерируется исключение.
Метод getRGBColorValue
Синтаксис: объект.getRGBColorValue() Результат: значение типа RGBColor Иcключения: INVALID_ACCESS_ERR
Поддержка:
Метод getRGBColorValue возвращает объект RGBColor, содержащий значение цвета. Если primitiveType отличен от CSS_RGBCOLOR, то генерируется исключение.
Метод getStringValue
Синтаксис: объект.getStringValue() Результат: значение типа DOMString Иcключения: INVALID_ACCESS_ERR
Поддержка:
Метод getStringValue возвращает строковое значение объекта. primitiveType должен указывать на строковый тип значения (т. е. иметь одно из следующих значений: CSS_STRING, CSS_URI, CSS_IDENT или CSS_ATTR). В противном случае генерируется исключение.
Метод setFloatValue
Синтаксис: объект.setFloatValue(unitType, value) Аргументы: unitType, value — числовые выражения Иcключения: INVALID_ACCESS_ERR, NO_MODIFICATION_ALLOWED_ERR
Поддержка:
Метод 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
Поддержка:
Метод setStringValue задает новое строковое значение value. Аргумент stringType должен иметь одно из следующих значений: CSS_STRING, CSS_URI, CSS_IDENT или CSS_ATTR. Если данное свойство не может принимать значений такого типа, то генерируется исключение.
4.10.4. Списки свойств: интерфейс CSSValueList
Поддержка:
Интерфейс CSSValueList реализует упорядоченные списки свойств CSS. Он имеет единственное свойство length, возвращающее количество свойств в списке, и единственный метод item, возвращающий элемент списка с заданным номером (элементы списка нумеруются, начиная с нуля). Пустой список означает, что соответствующее свойство имеет значение none.
Свойство length
Синтаксис: список.length Изменяемое: нет
Поддержка:
Свойство length возвращает количество элементов в данном списке. Допустимые индексы элементов списка лежат в диапазоне от 0 до length-1 включительно.
Метод item
Синтаксис: список.item(index) Аргументы: index — числовое выражение Результат: объект CSSValue или null Исключения: нет
Поддержка:
Метод item возвращает элемент списка свойств с заданным индексом в качестве результата. Если индекс выходит за пределы диапазона элементов списка, то возвращается null.
4.10.5. Цвет: интерфейс RGBColor
Поддержка:
Интерфейс RGBColor соответствует цветам CSS. Он имеет три свойства, возвращающих числовые значения RGB-составляющих данного цвета:
| Свойство | Изменяемое | Модель | Описание |
|---|---|---|---|
| blue | Нет | DOM 2 | Синий цвет. |
| green | Нет | DOM 2 | Зеленый цвет. |
| red | Нет | DOM 2 | Красный цвет. |
Свойство blue
Синтаксис: объект.blue Изменяемое: нет
Поддержка:
Свойство blue возвращает значение синего цвета типа CSSPrimitiveValue в диапазоне от 0 до 255 или от 0% до 100%.
Свойство green
Синтаксис: объект.green Изменяемое: нет
Поддержка:
Свойство green возвращает значение зеленого цвета типа CSSPrimitiveValue в диапазоне от 0 до 255 или от 0% до 100%.
Свойство red
Синтаксис: объект.red Изменяемое: нет
Поддержка:
Свойство red возвращает значение красного цвета типа CSSPrimitiveValue в диапазоне от 0 до 255 или от 0% до 100%.
4.10.6. Прямоугольник: интерфейс Rect
Поддержка:
Интерфейс Rect соответствует прямоугольникам CSS. Он имеет четыре свойства, возвращающих координаты данного прямоугольника:
| Свойство | Изменяемое | Модель | Описание |
|---|---|---|---|
| bottom | Нет | DOM 2 | Нижняя координата. |
| left | Нет | DOM 2 | Левая координата. |
| right | Нет | DOM 2 | Правая координата. |
| top | Нет | DOM 2 | Верхняя координата. |
Свойство bottom
Синтаксис: объект.bottom Изменяемое: нет
Поддержка:
Свойство bottom возвращает нижнюю координату прямоугольника типа CSSPrimitiveValue.
Свойство left
Синтаксис: объект.left Изменяемое: нет
Поддержка:
Свойство left возвращает левую координату прямоугольника типа CSSPrimitiveValue.
Свойство right
Синтаксис: объект.right Изменяемое: нет
Поддержка:
Свойство right возвращает правую координату прямоугольника типа CSSPrimitiveValue.
Свойство top
Синтаксис: объект.top Изменяемое: нет
Поддержка:
Свойство top возвращает верхнюю координату прямоугольника типа CSSPrimitiveValue.
4.10.7. Счетчик: интерфейс Counter
Поддержка:
Интерфейс Counter соответствует счетчикам CSS. Он имеет следующие свойства:
| Свойство | Изменяемое | Модель | Описание |
|---|---|---|---|
| identifier | Нет | DOM 2 | Идентификатор счетчика. |
| listStyle | Нет | DOM 2 | Стиль счетчика. |
| separator | Нет | DOM 2 | Разделитель счетчиков. |
Свойство identifier
Синтаксис: объект.identifier Изменяемое: нет
Поддержка:
Свойство identifier возвращает идентификатор счетчика типа DOMString.
Свойство listStyle
Синтаксис: объект.listStyle Изменяемое: нет
Поддержка:
Свойство listStyle возвращает стиль счетчика типа DOMString.
Свойство separator
Синтаксис: объект.separator Изменяемое: нет
Поддержка:
Свойство separator возвращает разделитель типа DOMString, который используется между вложенными счетчиками.
4.10.8. Декларация стиля CSS: интерфейс CSSStyleDeclaration
Поддержка:
Интерфейс CSSStyleDeclaration предназначен для описания блоков деклараций CSS. Более подробно мы обсудили его в п. 4.10.1.
| Свойство | Изменяемое | Модель | Описание |
|---|---|---|---|
| cssText | Да | DOM 2 | Текст декларации стиля. |
| length | Нет | DOM 2 | Количество явно заданных свойств. |
| parentRule | Нет | DOM 2 | Правило CSS, содержащее данную декларацию. |
| Метод | Модель | Описание |
|---|---|---|
| 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 (при записи)
Поддержка:
Свойство 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 Изменяемое: нет
Поддержка:
Свойство length возвращает количество свойств, явно заданных в данном блоке деклараций. Пример:
alert(document.styleSheets[0].cssRules[0].style.length);
Свойство parentRule
Синтаксис: объект.parentRule Изменяемое: нет
Поддержка:
Если данная декларация содержится в таблице стилей, то свойство parentRule возвращает объект CSSRule, содержащий ее. В противном случае возвращается null. Пример:
alert(document.styleSheets[0].cssRules[0].style.parentRule);
Метод getPropertyCSSValue
Синтаксис: объект.getPropertyCSSValue(propertyName) Аргументы: propertyName — выражение типа DOMString Результат: значение типа CSSValue или 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
Поддержка:
Метод getPropertyPriority возвращает приоритет свойства propertyName. Его результатом может быть либо пустая строка, либо строка "!important", соответствующая атрибуту CSS !important. Пример:
var rule = document.styleSheets[0].cssRules[0];
alert(rule.style.getPropertyPriority("font-size"));
Метод getPropertyValue
Синтаксис: объект.getPropertyValue(propertyName) Аргументы: propertyName — выражение типа DOMString Результат: значение типа DOMString
Поддержка:
Метод getPropertyValue возвращает строку, содержащую значение свойства propertyName. Пример:
var rule = document.styleSheets[0].cssRules[0];
alert(rule.style.getPropertyValue("font-size"));
Метод item
Синтаксис: объект.item(index) Аргументы: index — числовое выражение Результат: значение типа DOMString
Поддержка:
Метод item возвращает строку, содержащую имя свойства с номером index. Пример:
alert(document.body.style.item(0));
Метод removeProperty
Синтаксис: объект.removeProperty(propertyName) Аргументы: propertyName — выражение типа DOMString Результат: значение типа DOMString Иcключения: NO_MODIFICATION_ALLOWED_ERR
Поддержка:
Метод 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
Поддержка:
Метод setProperty задает значение и приоритет свойства propertyName. Значение свойства задается аргументом value, а приоритет — аргументом priority, который может быть либо строкой "!important", либо пустой строкой. Примеры:
document.body.style.setProperty("color", "red", "!important");
document.body.style.setProperty("background-color", "green", "");
4.10.9. Свойства CSS: интерфейс CSS2Properties
Поддержка:
Интерфейс 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
Поддержка:
Метод 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
Поддержка:
Метод 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);
