Наверное, каждый, кто хоть немного работал с JavaScript, думал о том, как упростить себе жизнь при работе с классами DOM элементов. Ну например у элемента есть 2-3 класса и вам нужно добавить еще один, проверить наличие какого-либо класса или удалить один из классов. Старый добрый element.className ну совсем неудобен для таких операций. Самое очевидное и удобное решение до сих пор было воспользоваться уже готовыми библиотеками типа jQuery, в которых есть методы addClass(), removeClass(), toggleClass() .. ну или изобрести велосипед и написать свой набор функций. Но вот, совсем недавно, с развитием HTML5, появился javaScript classList API. Он интуитивно понятен, очень прост, работает быстрее всевозможных библиотек и не требует дополнительного кода. То о чем вы мечтали! API уже давно рботает во всех нормальных браузерах и вот наконец-то (Алелуййа!!) поддерживается IE10-м, что по своему удивительно. По поводу IE 7-9 смотрите в конце статьи. Пример:
classList api Итак, что у нас есть в арсенале? Каждый HTML элемент содержит свойство
classList, которое представляет из себя объект, доступный для чтения.
JS
el.classList =
{
length: number,
add: function() {},
contains: function() {},
item: function() {},
remove: function() {},
toggle: function() {}
}
Как узнать сколько классов есть у элемента?
JS
el.classList.length;
Как добавить класс к элементу?
JS
el.classList.add('myCssClass');
Как удалить один из классов элемента?
JS
el.classList.remove('myCssClass');
Как проверить, содержит ли элемент какой-либо класс?
JS
el.classList.contains('myCssClass'); // возвратит true/false
Как преключить класс (добавить, если его нет, или удалить, если он есть)?
JS
el.classList.toggle('myCssClass');
Как узнать индекс интересующего класса в наборе классов элемента?
JS
el.classList.item('myCssClass'); // возвратит индекс класса myCssClass
Подробнее о поддержке браузерами можно узнать здесь «Как же работать с IE 7-9 ?» — спросите Вы.. Не пререживайте, умные люди уже давно написали грамотный полифил который можно подключить только к старым IE, если есть необходимость с ними работать.
PDF и версия для печати
Интересно, в jquery используют это? Надо посмотреть как hasClass пашет
не юзает
у них все по старому
Может в новых версиях?
http://bugs.jquery.com/ticket/5087
осталось им сделать переключение класса в зависимости от условия — добавить второй необязательный аргумент
а пока приходится писать извраты вида
function toggleClassIfCondition(element, condition, className) {
if (className) {
if (condition === true) {
element.classList.add(className);
}
else if (condition === false) {
element.classList.remove(className);
}
else {
element.classList.toggle(className);
}
else {
console.log(‘You forgot to add class name’);
}
}
Я просто оставлю это здесь, native js:
if (document.body.classList.contains(‘thatClass’)) {
// do some stuff
}
Добавление, удаление, переключение классов:
document.body.classList.add(‘thisClass’);
// $(‘body’).addClass(‘thisClass’);
document.body.classList.remove(‘thatClass’);
// $(‘body’).removeClass(‘thatClass’);
document.body.classList.toggle(‘anotherClass’);
// $(‘body’).toggleClass(‘anotherClass’);