Изменение стилей элементов

Теперь вы должны понимать, как редактировать таблицы стилей, соединенные со страницей, и создавать и модифицировать в них правила CSS. Что делать, если вы захотите изменить определенный элемент в DOM? Используя DOM API можно получить доступ к определенным элементам страницы. Возвращаясь к примеру карусели можно видеть, что функции определены таким образом, что при щелчке на статье эта статья выделяется, в то время как основной текст статьи выводится ниже.

С помощью DOM мы получаем доступ к объекту style, который описывает стиль документа. Этот объект style определен как CSSStyleDeclaration; подробное объяснение этого можно найти в документации W3C по интерфейсу CSSStyleDeclaration (http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration). Объект style работает не совсем так, как некоторые другие свойства, определенные в элементе HTML. В отличие от element.href или element.id, которые возвращают строки, element.style возвращает объект. Это означает, что невозможно задать стиль, присваивая строку для element.style.

Объект style имеет атрибуты, которые соответствуют различным заданным свойствам CSS. Например, style.color возвращает заданный на элементе цвет. Выполняя element.style.color = "red"; можно динамически изменять стиль. Ниже показана функция, которая превращает цвет элемента в красный, когда ей передается id элемента.

function colorElementRed(id) {

var el = document.getElementById(id);

el.style.color = "red";

}

Можно также использовать setAttribute(key, value) для задания стиля элемента. Например, задать цвет элемента как красный, вызывая на элементе element.setAttribute('style', 'color: red');, но будьте осторожны, так как это удаляет любые изменения, сделанные в объекте style.

Когда стиль элемента задается таким образом, то это то же самое, как если бы мы задавали его как объявление атрибута style элемента html. Этот стиль будет применяться только в том случае, когда важность и специфичность правила будут больше, чем другие примененные к элементу правила (специфичность объясняется в лекции 28 о наследовании и каскадировании CSS).

У некоторых из вас может возникнуть вопрос, что происходит, когда заданное свойство CSS имеет дефис. В этом случае синтаксис должен быть другой, так как, например, если написать element.style.font-size, JavaScript будет пытаться вычесть size из записи element.style.font, что будет совершенно не то, что требуется. Чтобы исключить эту проблему, все свойства CSS записаны в верблюжьей нотации (CamelCase). Как показано ниже, необходимо писать element.style.fontSize, чтобы получить доступ к размеру шрифта элемента. Например:

function changeElement(id) {

var el = document.getElementById(id);

el.style.color = "red";

el.style.fontSize = "15px";

el.style.backgroundColor = "#FFFFFF";

}

Помните объекты таблиц стилей? Свойство styleSheet.cssRules возвращает список объектов style, представляющих все правила CSS, содержащиеся в таблице стилей. Эти объекты style можно использовать также как объекты style для других элементов. В этом случае вместо изменения одного определенного элемента на странице, изменения здесь будут изменять все элементы, к которым применяются правила CSS.

В примере ниже функция увеличения текста использует объект style, а функция уменьшения текста использует setAttribute. Если текст задан красным цветом, а затем вызывается setAttribute с кнопкой уменьшения текста, то можно заметить, что изменения будут переопределены. Посмотрите действующий пример изменения стилей элементов (http://dev.opera.com/articles/view/dynamic-style-css-javascript/changingelementstyles.html).