Глава 4.10. Динамическое управление стилями4.10.1. Способы доступа к стилямDOM 2 содержит специальный интерфейс CSSStyleDeclaration, который предназначен для описания блоков деклараций CSS. Этот интерфейс используется и для описания содержимого правил CSS, и для описания стилей отдельных элементов дерева документа. Он имеет чрезмерно усложненную, на наш взгляд, структуру и обеспечивает три разных способа доступа к отдельным свойствам 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Синтаксис: объект.cssText Изменяемое: да Иcключения: SYNTAX_ERR, INVALID_MODIFICATION_ERR, NO_MODIFICATION_ALLOWED_ERR (при записи) Поддержка: Свойство cssText позволяет читать и задавать значение свойства в виде строки DOMString. Свойство cssValueTypeСинтаксис: объект.cssValueType Изменяемое: нет Поддержка: Свойство cssValueType возвращает целое число, означающее тип данного значения в соответствии со следующей таблицей:
4.10.3. Примитивное значение свойства: интерфейс CSSPrimitiveValueПоддержка: Интерфейс CSSPrimitiveValue соответствует примитивному значению свойства CSS. Он является производным от CSSValue и имеет следующие дополнительные свойства и методы:
Свойство primitiveTypeСинтаксис: объект.primitiveType Изменяемое: нет Поддержка: Свойство primitiveType возвращает целое число, означающее тип данного примитивного значения в соответствии со следующей таблицей:
Метод 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Синтаксис: объект.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Синтаксис: объект.bottom Изменяемое: нет Поддержка: Свойство bottom возвращает нижнюю координату прямоугольника типа CSSPrimitiveValue. Свойство leftСинтаксис: объект.left Изменяемое: нет Поддержка: Свойство left возвращает левую координату прямоугольника типа CSSPrimitiveValue. Свойство rightСинтаксис: объект.right Изменяемое: нет Поддержка: Свойство right возвращает правую координату прямоугольника типа CSSPrimitiveValue. Свойство topСинтаксис: объект.top Изменяемое: нет Поддержка: Свойство top возвращает верхнюю координату прямоугольника типа CSSPrimitiveValue. 4.10.7. Счетчик: интерфейс CounterПоддержка: Интерфейс Counter соответствует счетчикам CSS. Он имеет следующие свойства:
Свойство identifierСинтаксис: объект.identifier Изменяемое: нет Поддержка: Свойство identifier возвращает идентификатор счетчика типа DOMString. Свойство listStyleСинтаксис: объект.listStyle Изменяемое: нет Поддержка: Свойство listStyle возвращает стиль счетчика типа DOMString. Свойство separatorСинтаксис: объект.separator Изменяемое: нет Поддержка: Свойство separator возвращает разделитель типа DOMString, который используется между вложенными счетчиками. 4.10.8. Декларация стиля CSS: интерфейс CSSStyleDeclarationПоддержка: Интерфейс CSSStyleDeclaration предназначен для описания блоков деклараций CSS. Более подробно мы обсудили его в п. 4.10.1.
Свойство 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); | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Не поддерживается.
Не поддерживается.