Додаємо та видаляємо CSS-класи за допомогою Javascript, Javascript

У цій статті ми розповімо про два способи маніпуляції з HTML class. У першому використовується Javascript-властивість classList, а в другому задіюється бібліотека jQuery. Для початку, погляньте на наступний код:

У ньому представлена ​​кнопка з подією onclick, яка дозволяє перемикати колір кнопки. CSS-код визначає класи для встановлення кольору тла:

Єдине, що тут залишається зробити, це реалізувати функцію toggleColor() :

Кожен елемент має властивість classList , що містить у собі атрибути HTML style class . Ця властивість включає методи, що дозволяють додавати або видаляти класи:

У наведеному вище прикладі використовується три методи classList.

• contains() – повертає значення true , якщо елемент має батьківський клас. Якщо його немає, то повертається значення false ;
• add() – додає заданий клас елементу. Ця дія ігнорується, якщо елемент містить заданий клас;
• Remove() - заданий клас, за його наявності, видаляється.

Це завдання можна вирішити простіше за допомогою методу toggle() , який додає зазначений атрибут class в HTML за його відсутності або видаляє його, якщо він вже застосований:

Працюючи з кількома класами їх можна розділяти комами:

Єдиний недолік даного підходу полягає в тому, що він був представлений лише в HTML5, і не факт, що він добре підтримуватиметься застарілими браузерами.

jQuery пропонує методи, які працюють за тим самим принципом. Але також дозволяють використовувати укорочені властивості виділення елементів. Давайте подивимося, як функція toggleColor() повинна бути написана на jQuery:

Можна використовувати addClass(), removeClass() і hasClass() для toggleColor() . Зверніть увагу, що нові HTML style class можна перераховувати через пробіл у тому ж рядку.

На цьому все! Тепер ви знаєте, як легко змінювати зовнішній вигляд DOM-елементів!

---