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

Для работы со стилевыми свойствами элементов в JavaScript применяются, главным образом, два подхода:

Изменение свойства style

Изменение значения атрибута class

Свойство style

Свойство style представляет сложный объект для управления стилем и напрямую сопоставляется с атрибутом style html-элемента. Этот объект содержит набор свойств CSS: element.style.свойствоCSS.
Например, установим цвет шрифта:

var root = document.documentElement;
// устанавливаем стиль
root.style.color = "blue";
// получаем значение стиля
document.write(root.style.color); // blue

В данном случае название свойства color совпадает со свойством css. Аналогично мы могли бы установить цвет с помощью css:

html{
	color:blue;
}

Однако ряд свойств css в названиях имеют дефис, например, font-family. В JavaScript для этих свойств дефис не употребляется. Только первая буква, которая идет после дефиса, переводится в верхний регистр:

var root = document.documentElement;
root.style.fontFamily = "Verdana";

Свойство className

С помощью свойства className можно установить атрибут class элемента html. Например:

Благодаря использованию классов не придется настраивать каждое отдельное свойство css с помощью свойства style.

Но при этом надо учитывать, что прежнее значение атрибута class удаляется. Поэтому, если нам надо добавить класс, надо объединить его название со старым классом: articleDiv.className = articleDiv.className + " blueStyle"; И если надо вовсе удалить все классы, то можно присвоить свойству пустую строку: articleDiv.className = "";

Свойство classList

Выше было рассмотрено, как добавлять классы к элементу, однако для управления множеством классов гораздо удобнее использовать свойство classList. Это свойство представляет объект, реализующий следующие методы:

• add(className): добавляет класс className
• remove(className): удаляет класс className
• toggle(className): переключает у элемента класс на className. Если класса нет, то он добавляется, если есть, то удаляется

Например:

var articleDiv = document.querySelector("div.article");
// удаляем класс
articleDiv.classList.remove("article");
// добавляем класс
articleDiv.classList.add("blueStyle");
// переключаем класс
articleDiv.classList.toggle("article");

Output