Как лучше добавлять класс в div на чистом JavaScript?

#javascript

Как лучше добавлять класс в div на чистом JavaScript (без jQuery)?
    

Ответы

Ответ 1

Element.classList  

Синтаксис  


  var elementClasses = 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, которое возвращает количество
классов у элемента.




const 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"]
 
 





  *все взято из MDN кому не лень можно и здесь смотреть


Ответ 2

Свойство classList возвращает псевдомассив DOMTokenList, содержащий все классы элемента.

item.classList.add('newClass'); // назначаем новый класс