Свойство classList на языке Javascript

В JavaScript свойство classList объекта Element выступает свойством только для чтения, возвращающее живую коллекцию DOMTokenList, включающую значение глобального атрибута class (классы элемента). Использование свойства classList – это удобная альтернатива доступа к списку классов элемента через свойство Element.className в виде строки с пробелами.

Синтаксис

var elementClasses = elem.classList;

Результат — псевдомассив DOMTokenList, включающий все классы узла elem

Методы

ClassList является геттером. Объект, возвращаемый им, имеет несколько методов:

  • add( String [,String] ) — добавляет элементу указанные классы
  • remove( String [,String] ) — удаляет у элемента указанные классы
  • item ( Number ) — результат аналогичен вызову сlassList[Number]
  • toggle ( String [, Boolean]). Если у элемента отсутствует класс — добавляет, в противном случае — убирает. Если вторым параметром передано false — удаляет указанный класс, а если true, то добавляет. Если вторым параметром передана переменная с typeof == ‘undefined’ или 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»]

Полифил

// Источник: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca
;(function(){
// helpers
varregExp=function(name){
returnnewRegExp(‘(^| )’+ name +'( |$)’);
};
varforEach=function(list, fn, scope){
for(var i =0; i < list.length; i++){
fn.call(scope, list[i]);
}
};

// class list object with basic methods
functionClassList(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){
returnthis.contains(name)
?(this.remove(name),false):(this.add(name),true);
},
contains:function(name){
returnregExp(name).test(this.element.className);
},
// bonus..
replace:function(oldName, newName){
this.remove(oldName),this.add(newName);
}
};

// IE8/9, Safari
if(!(‘classList’inElement.prototype)){
Object.defineProperty(Element.prototype,’classList’,{
get:function(){
returnnewClassList(this);
}
});
}

// replace() support for others
if(window.DOMTokenList &&DOMTokenList.prototype.replace ==null){
DOMTokenList.prototype.replace =ClassList.prototype.replace;
}
})();

Поддержка браузерами

Особенность Internet Explorer Firefox (Gecko) Safari (WebKit) Chrome Opera
toggle method’s second argument not supported 24 (24) yes
Баг WebKit 99375

 

24 15
Basic support 10 3.6 (1.9.2) 5.1
Баг WebKit 20709
8.0 11.50
Особенность IE Opera Mobile Android Safari Mobile Firefox Mobile (Gecko)
toggle method’s second argument ? ? ? ? 24.0 (24)
Basic support 10 11.10 3.0 5.0 1.0 (1.9.2)

Если у вас остались какие-то вопросы по теме, можете задать их в комментариях.

Оцените статью
Образовательный портал WELCOME4U.RU
Добавить комментарий

Adblock
detector