Сегодня все разработчики умеют добавлять новые HTML-классы. Просто откройте HTML-документ, определите место, куда вы хотите добавить что-нибудь, впишите соответствующий код и задайте классу название. Но когда дело доходит до разработки интерактивного веб-сайта, который позволяет посетителям взаимодействовать с элементами дизайна, вам нужно уметь изменять, вставлять и удалять HTML-классы по требованию.
Вы можете реализовать это при помощи jQuery. Эта простая функция добавляет и удаляет my-new-class к div-элементу.
// ## add class
$('div').addClass('my-new-class');
// ## remove class
$('div').removeClass('my-new-class');Мы также можем реализовать это при помощи стандартного javascript-кода:
// add class
document.getElementById('elem').className = 'my-new-class';
// remove class
document.getElementById('elem').className = document.getElementByTag('div').className.replace( /(?:^|\s)my-new-class(?!\S)/g , '' )Как видно, код, приведенный выше, менее понятен на первый взгляд, нежели вариант с использованием фреймворка jQuery. Но если вам не хочется полагаться на фреймворк, вы можете использовать javascript API под названием classList.
Применение API classList
Подобно jQuery, classList предоставляет нам набор методов, которые позволяют нам изменять HTML-классы.
В случае, когда у нас используется div-элемент с несколькими классами, мы можем извлечь классы, которые применены к div, при помощи classList.
var classes = document.getElementByID('elem').classList;
console.log(classes);Если открыть Консоль браузера, то можно увидеть список классов.
Чтобы добавить или удалить классы, мы можем воспользоваться .add() и .remove().
var elem = document.getElementByID('elem');
// add class
elem.classList.add('my-new-class');
// remove class
elem.classList.remove('my-new-class');Добавление нескольких классов также реализуется за счет разделения классов запятой:
elem.classList.add('my-new-class', 'my-other-class');Чтобы проверить, содержат ли конкретные элементы определенные классы, мы можем использовать .contains(). Эта функция вернет ответ true, если указанный класс присутствует, и false, если класс не будет найден.
elem.classList.contains('class-name');Мы также можем переключать классы при помощи .toggle(). Следующий фрагмент кода показывает, каким образом мы привязываем метод .toggle() посредством события click.
var button = document.getElementById('button');
function toggle() {
elem.classList.toggle('bg');
}
button.addEventListener('click', toggle, false);Ниже вы можете посмотреть демо.
Посмотреть демо | Скачать исходный код
В завершение
classList – это новый нативный javascript API, который был представлен вместе с HTML5. Он очень прост и надежен, и работает в следующих браузерах: Firefox 3.6, Opera 11.5 и Chrome 8, и Safari 5.1. Однако его поддержка отсутствует в браузерах IE9 и ниже, поэтому вам придется использовать Polyfills при реализации classList API в Internet Explorer.
