Изменить class для элемента с помощью JavaScript/jQuery

· JavaScript, jQuery и Снипеты · 2 мин чтения

Современный HTML5 сильно улучшается и тем самым дает больше возможностей для JavaScript. В этой записи я покажу как можно изменять, добавить или удалить класс (class) для элементов с помощью JavaScript или jQuery.

HTML для демо

Допустим у нас есть такой элемент, у которого есть три класса «test1», «test2» и «hello-world» и id «myel».

<div class="test1 test2 hello-world" id="myel">Текст внутри элемента</div>

Это пример будет использоваться для JavaScript и jQuery решений ниже.

JavaScript решение

Современные браузеры добавили новые способы управления классами для элементов, например classList.

Ниже предоставлен пример его работы с официального сайта MDN:

var elem = document.querySelector("#clock")

//Выведем классы
console.log(elem.classList); //DOMTokenList ["example", "for", "you"]

//Добавим классы
elem.classList.add("ok", "understand");
console.log(elem.classList); //DOMTokenList ["example", "for", "you", "ok", "understand"]

//Переключим классы
elem.classList.toggle("you");
elem.classList.toggle("he");
console.log(elem.classList); //DOMTokenList ["example", "for", "ok", "understand", "he"]

//Проверим класс
console.log(elem.classList.contains("example")); //true
console.log(elem.classList.contains("lol")); //false

//И удалим классы
elem.classList.remove("example", "for", "understand", "he");
console.log(elem.classList); //DOMTokenList ["ok"]

Современное HTML решение используя classList

Для начала нам нужно найти сам элемент с помощью document.getElementById() и далее использовать метод classList. Выглядит это все следующим образом:

// Добавить "test3" в список классов
document.getElementById("myel").classList.add('test3');

// Удалим test2 из списка всех классов
document.getElementById("myel").classList.remove('test2');

// если у элемента класс test1? 
// вернет "true" потому что он действительно есть
if ( document.getElementById("myel").classList.contains('test1') )

// Класс "dd-11" будет добавляться и убираться
document.getElementById("myel").classList.toggle('dd-11');

В целом весь код выше в комментариях и вам должно понять. Но вот еще небольшое разъяснение:

  • add()  — добавляет новый класс
  • remove() — удаляет указанный класс
  • contains() — проверяет существование класса
  • toggle() — ставит и удаляет класс, этот метод можно использовать для например нажатия на кнопку, чтобы у элемента ставился и убирался класс

Если лишь одно НО: Internet Explorer до 10 версии не поддерживают метод classList. Если для вас это важно, то лучше воспользоваться другими способами, которые я буду описывать ниже в этом посте. Но не забывайте, что веб очень быстро улучшается и уже есть первые попытки IE к поддержке этого метода, но лучше пока что не рисковать.

100% рабочий способ, поддерживаемый всеми браузерами (кроссбраузерный)

Выглядит он вот так:

document.getElementById("myel").className = "wow";

Мы используем className для манипуляции классами элемента «myel». Есть лишь один минус этого способа — он заменит все текущие классы элемента на «wow».

Самое важное в этом способе — это его кроссбраузерность.

Если ваша задача состоит в том, чтобы изменить класс(-ы) для одного-двух элементов на странице, то лучше использоваться JavaScript, и забыть про jQuery, потому что вы лишь добавите весь странице и она станет медленнее грузиться.

jQuery

В jQuery все упрощенно до невозможности и работает кроссбраузерно.

Например, чтобы добавить класс «test7», нужно воспользоваться методом addClass():

$("myel").addClass("test7");

Чтобы удалить его, нужно использовать removeClass():

$("myel").removeClass("test7");

Если вы хотите заменить все классы на один единственный, то нужно использовать метод attr():

$("myel").attr("class", "test3 test4");

И теперь у «myel» будет только два класса, «test3» и «test4».

Вывод

А что вы используете чаще? JavaScript или jQuery?

Какой способом вам нравится больше всего и почему?

Комментарии