Встроенные стили

Стили в DOM

Работа со стилями в объектной модели документа определена в спецификации DOM Level 2 Style. Операции со стилями выполняются в DOM 2 с помощью объектов style и styleSheet, а также коллекции styleSheets.

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

Имена свойств объекта style совпадают с именами свойств стилей, кроме тех случаев, когда в имени свойства встречается символ дефиса "-". Поскольку в идентификаторах переменных JavaScript символ "-" запрещен, эти символы убираются из имени, а первые буквы всех слов, образующих имя атрибута, кроме первого, делаются прописными, например атрибут font-size преобразуется в свойство fontSize.

Кроме того, у объекта style имеется свойство cssText, значением которого является текстовое представление стиля (параметр атрибута style).

Для добавления или изменения свойства, получения значения свойства и удаления свойства стилей в Internet Explorer для объекта style используются методы

setAttribute(имя-свойства, значение-свойства),

getAttribute(имя-свойства)

removeAttribute(имя-свойства).

Если свойство имя-свойства не задано в атрибуте style, то функция getAttribute() возвращает пустую строку.

Однако в спецификации DOM Level 2 Style и в остальных Web-браузерах (Firefox, Opera и Safari) для этих же целей используются методы

setProperty(имя-свойства, значение-свойства, приоритет-свойства),

getPropertyValue(имя-свойства)

removeProperty(имя-свойства).

В качестве значения приоритета свойства в методе setProperty() обычно используется "important".

Если свойство имя-свойства не задано в атрибуте style, то функция getPropertyValue() в Firefox и Opera возвращает пустую строку, а в Safari – значение null.

Пример 4.5.37. Получение и изменение свойств стилей в атрибуте style в Internet Explorer и DOM 2:

Заголовок

<h1 id="part1"

style="font-size: 16pt; text-align: center; color:red">

Раздел 1</h1>

будет выведен на в Web-странице следующим образом:

Получить элемент part1 можно с помощью предложения

var part1 = document.getElementById("part1");

Получить и вывести значение свойства для объекта элемента можно с помощью следующих предложений:

// Если Web-браузер - Internet Explorer

if(navigator.userAgent.indexOf("MSIE")!= -1)

// Получение значения свойства text-align

// в Internet Explorer

CSSTextAlign = part1.style.getAttribute("textAlign");

else

// Получение значения свойства text-align в DOM 2

CSSTextAlign =

part1.style.getPropertyValue("text-align");

// Вывод значения свойства text-align

alert("text-align: " + CSSTextAlign);

Вывод функции будет иметь следующий вид:

(в Internet Explorer)

(в Firefox)

Изменить цвет заголовка на синий можно с помощью предложений:

// Если Web-браузер - Internet Explorer

if(navigator.userAgent.indexOf("MSIE")!= -1)

// Изменение значения свойства color

// в Internet Explorer

part1.style.setAttribute("color", "blue");

else

// Изменение значения свойства color в DOM 2

part1.style.setProperty("color", "blue");

Заголовок после этого преобразования примет следующий вид:

Удалить свойство color можно с помощью предложений:

// Если Web-браузер - Internet Explorer

if(navigator.userAgent.indexOf("MSIE")!= -1)

// Удаление свойства color в Internet Explorer

part1.style.removeAttribute("color");

else

// Удаление свойства color в DOM 2

part1.style.removeProperty("color");

В результате цвет заголовка изменится на цвет по умолчанию (черный):

Чтобы операции изменения, получения значений и удаления свойств работали одинаково и в Internet Explorer и в остальных Web-браузерах, необходимо использовать прямое получение и изменение свойств, как показано в примере ниже.

Пример 4.5.38. Получение и изменение свойств стилей в атрибуте style независимо от Web-браузера:

Абзац

Содержимое абзаца</p>

будет выведен на в Web-странице следующим образом:

Определим переменную p1:

p1 = document.getElementById("p1");

Получить значение свойства text-align в атрибуте style можно, присвоив его значение переменной:

CSSTextAlign = p1.style.textAlign;

Вывод значения этой переменной с помощью функции

alert("text-align: " + CSSTextAlign);

имеет следующий вид:

Изменить размер шрифта можно простым изменением значения свойства стиля:

p1.style.fontSize = "16pt";

Вывод абзаца примет следующий вид:

Задать новое свойство (жирный шрифт в абзаце) можно следующим образом:

p1.style.fontWeight = "bold";

После этого вывод абзаца изменится следующим образом:

Для проверки задано ли то или иное свойство в можно использовать то обстоятельство, что при получении значения не определенного в атрибуте style свойства возвращается пустая строка. Проверка задания свойства color:

colorCSS = p1.style.color;

if (colorCSS!= "")

alert("color: <" + colorCSS + ">");

else

alert("Свойство color не задано");

выводит в Web-странице следующее сообщение: