Свойство classList в js с примерами

Работая с классами Css, нам очень будет необходим данный урок...

Свойство classList в js с примерами.

С помощью него JavaScript предоставляет доступ к списку классов элемента DOM. Это позволяет добавлять, удалять и проверять наличие классов у элемента. Вот несколько примеров использования classList:

1.  Добавление класса: 


// Получаем элемент по его id
const element = document.getElementById('myElement');
// Добавляем класс 'active'
element.classList.add('active');

2. Удаление класса:


// Получаем элемент по его классу
const element = document.querySelector('.myClass');

// Удаляем класс 'hidden'
element.classList.remove('hidden');

3. Проверка наличия класса.

// Получаем элемент по его селектору
const element = document.querySelector('.myClass');
// Проверяем наличие класса 'active'
if (element.classList.contains('active')) {
    console.log('Элемент активен');
} else {
    console.log('Элемент не активен');
}

4.  Переключение класса

// Получаем элемент по его селектору
const element = document.querySelector('.toggleClass');

// Переключаем класс 'hidden'
element.classList.toggle('hidden');

Свойство classList очень удобно использовать для динамического изменения стилей элементов на веб-странице. Оно предоставляет простой интерфейс для работы с классами CSS без необходимости напрямую манипулировать строками классов элемента.

Как всегда js во многих ситуациях интерактивен.