Описание
Свойство classList
возвращает псевдомассив DOMTokenList
, содержащий все классы элемента.
У classList есть примитивная альтернатива - свойство className, которое содержит значение атрибута class элемента.
Синтаксис
var elementClasses = elem.classList;
- Результат - псевдомассив
DOMTokenList
, содержащий все классы узла elem
Методы
ClassList является геттером. Возвращаемый им объект имеет несколько методов:
- add( String [,String] )
- Добавляет элементу указанные классы
- remove( String [,String] )
- Удаляет у элемента указанные классы
- item ( Number )
Результат аналогичен вызовусlassList[Number]
- toggle ( String [, Boolean])
Если класс у элемента отсутствует - добавляет, иначе - убирает. Когда вторым параметром передано false - удаляет указанный класс, а если true - добавляет. - Если вторым параметром передан undefined или переменная с typeof == 'undefined', поведение будет аналогичным передаче только первого параметра при вызове toggle.
- contains ( String )
Проверяет, есть ли данный класс у элемента (вернет true или false)
И, конечно же, у ClassList есть заветное свойство length, которое возвращает количество классов у элемента.
Примеры
<div id="clock" class="example for you"> </div>
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"]
В Firefox 25- в методах add, remove и toggle возможно указать только один аргумент. Смотрите: https://bugzilla.mozilla.org/show_bug.cgi?id=814014
Полифилл
// Источник: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca
;(function() {
// helpers
var regExp = function(name) {
return new RegExp('(^| )'+ name +'( |$)');
};
var forEach = function(list, fn, scope) {
for (var i = 0; i < list.length; i++) {
fn.call(scope, list[i]);
}
};
// class list object with basic methods
function ClassList(element) {
this.element = element;
}
ClassList.prototype = {
add: function() {
forEach(arguments, function(name) {
if (!this.contains(name)) {
this.element.className += ' '+ name;
}
}, this);
},
remove: function() {
forEach(arguments, function(name) {
this.element.className =
this.element.className.replace(regExp(name), '');
}, this);
},
toggle: function(name) {
return this.contains(name)
? (this.remove(name), false) : (this.add(name), true);
},
contains: function(name) {
return regExp(name).test(this.element.className);
},
// bonus..
replace: function(oldName, newName) {
this.remove(oldName), this.add(newName);
}
};
// IE8/9, Safari
if (!('classList' in Element.prototype)) {
Object.defineProperty(Element.prototype, 'classList', {
get: function() {
return new ClassList(this);
}
});
}
// replace() support for others
if (window.DOMTokenList && DOMTokenList.prototype.replace == null) {
DOMTokenList.prototype.replace = ClassList.prototype.replace;
}
})();
Поддержка браузерами
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
Особенность | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 8.0 | 3.6 (1.9.2) | 10 | 11.50 | 5.1 Баг WebKit 20709 |
toggle method's second argument | 24 | 24 (24) | not supported | 15 | yes Баг WebKit 99375
|
Особенность | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 3.0 | 1.0 (1.9.2) | 10 | 11.10 | 5.0 |
toggle method's second argument | ? | 24.0 (24) | ? | ? | ? |