Работа с class и id объекта Element

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

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

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

Метод className ()

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.blueStyle{
color:blue;
font-family:Verdana;
}
.article{
font-size:20px;
}
</style>
</head>
<body>
<div class="article">
<h3>Заголовок статьи</h3>
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>
<script>
var articleDiv = document.querySelector("div.article");
// установка нового класса
articleDiv.className = "blueStyle";
// получаем название класса
document.write(articleDiv.className);
</script>
</body>
</html>

Благодаря использованию классов не придется настраивать каждое отдельное свойство css с помощью свойства style. Но при этом надо учитывать, что прежнее значение атрибута class удаляется. Поэтому, если нам надо добавить класс, надо объединить его название со старым классом:

articleDiv.className = articleDiv.className + " blueStyle";

И если надо вовсе удалить все классы, то можно присвоить свойству пустую строку:

articleDiv.className = "";

Метод matches ()

Метод matches() позволяет проверить, удовлетворяет ли элемент указанному CSS селектору.