Як працювати з класами елемента?

Керування класами CSS у JavaScript є ключовим інструментом для створення динамічних користувацьких інтерфейсів, анімацій та зміни тем оформлення. Найсучаснішим, зручним та ефективним способом роботи з класами виступає властивість classList, яка являє собою спеціальний об'єкт DOMTokenList.

Об'єкт classList надає багатий набір методів для точкової зміни класів елемента. Метод classList.add('className') додає один або кілька нових класів до елемента, якщо їх там ще немає. Метод classList.remove('className') видаляє вказаний клас, дозволяючи легко приховувати елементи або скидати стани. Універсальний метод classList.toggle('className') працює як перемикач: якщо клас у елемента є — він видаляється, якщо немає — додається. Це вкрай зручно для реалізації випадаючих меню, модальних вікон або перемикання тем.

Для перевірки наявності конкретного класу використовується метод classList.contains('className'), що повертає логічне true або false, що є незамінним в умовних конструкціях. А метод classList.replace(oldClass, newClass) дозволяє замінити один існуючий клас на новий за один оператор, що позбавляє від необхідності писати комбінації з remove та add.

Історичний підхід передбачав використання властивості className, яка повертає або встановлює весь рядок класів елемента цілком. Працювати з className менш зручно, оскільки при зміні одного класу доводиться вручну парсити та склеювати весь рядок цілком, щоб не затерти решту стилів. На відміну від нього, classList позбавляє від цих проблем, дозволяючи керувати кожним класом ізольовано та безпечно.

Наприклад, щоб реалізувати інтерактивну кнопку "лайк", достатньо повісити на неї обробник подій, який викликатиме el.classList.toggle('is-active'). Це робить код мінімалістичним, зрозумілим і легко підтримуваним у будь-яких проєктах.