Добавляем и удаляем CSS-классы при помощи Javascript

В этой статье мы расскажем о двух способах манипуляции с HTML class. В первом используется Javascript-свойство classList, а во втором задействуется библиотека jQuery. Для начала, взгляните на следующий код:

<div class="center">
    <button id="btn1" class="buttonProps blue" onclick="toggleColor()">classList.toggle()</button>
</div>

В нем представлена кнопка с событием onclick, которое позволяет переключать цвет кнопки. CSS-код определяет классы для установки цвета фона:

.blue {
 background: blue;
}
.red {
 background: red;
}

Единственное, что здесь остается сделать, это реализовать функцию toggleColor():

classList

У каждого элемента есть свойство classList, которое содержит в себе атрибуты HTML style class. Это свойство включает в себя методы, позволяющие добавлять или удалять классы:

function toggleColor() {

 var myButtonClasses = document.getElementById("btn1").classList;

 if (myButtonClasses.contains("blue")) {
    myButtonClasses.remove("blue");

 } else {
    myButtonClasses.add("blue");
 }

 if (myButtonClasses.contains("red")) {
    myButtonClasses.remove("red");
 } else {
    myButtonClasses.add("red");
 }
}

Посмотреть пример

В приведенном выше примере используется три метода classList.

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

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

function toggleColor() {
 document.getElementById("btn1").classList.toggle("blue");
document.getElementById("btn1").classList.toggle("red");

}

Посмотреть пример

При работе с несколькими классами их можно разделять запятыми:

document.getElementById("btn1").classList.toggle("blue”,  “bold");
document.getElementById("btn1").classList.toggle("red”,  “italics");

Единственный недостаток данного подхода заключается в том, что он был представлен лишь в HTML5, и не факт, что он будет хорошо поддерживаться устаревшими браузерами.

JQuery

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

function toggleColor() {

 $("#btn1").toggleClass("blue");
 $("#btn1").toggleClass("red");

}

Посмотреть пример

Можно использовать addClass(), removeClass() и hasClass() для toggleColor(). Обратите внимание, что новые HTML style class можно перечислять через пробел в той же строке.

Пример:

$("#btn1").toggleClass("blue bold");
$("#btn1").toggleClass("red italics");

На этом все! Теперь вы знаете, как без труда изменять внешний вид DOM-элементов!