Добавити забрати клас на JS

Як використовувати властивість classList для додавання / видалення класів елемента, наприклад:

<div class="alert" id="myDiv"></div>

 var elem = document.getElementById("myDiv");     // Вибираємо div по його атрибуту id
 elem.classList.add("highlight");  // Добавляємо клас highlight
 elem.classList.remove("alert");  // Удаляємо класс alert

// або так:
document.getElementById("container").classList.add("main");  // Додати клас

document.getElementById("container").classList.remove("main"); // Забрати клас

** classList властивість повертає колекцію атрибутів класу елемента, які можна змінити за допомогою add() та remove().

№1 - Для контейнера з id "container" додаємо клас "main", також він замінить існуючі класи
document.getElementById("container").className = "main"; 

<div id="container"></div>

№2 - Щоб додати клас до елемента, а не замінювати його існуючі класи, використовуйте +=

Зверніть увагу: важливо ставити префікс перед новим classname з простором; в іншому випадку втрачається один із існуючих класів елемента.

var div = document.getElementById("container");
div.className += " border";

№3 - Щоб застосувати кілька класів, вкажіть список імен класів, розділених пробілами, для майна className.

document.getElementById("container").className = "dimension border";