Современный 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?
Какой способом вам нравится больше всего и почему?
