Element.classList.toggle()

Element.classList.toggle() - переключає клас у елементі.

Синтаксис:

Element.classList.toggle( class [, force])

Параметри:

Element - об'єкт Element.

classList - властивість Element.classList.

class - рядок що містить назву класу.

force - не обов'язково вказувати. Логічне значення true або false яке вказує точну подію: чи видаляти чи додавати клас. Якщо true додає клас, false видаляє.

Опис:

toggle() метод об'єкту DOMTokenList що представляє властивість Element.classList, який переключає назву класу у елементі. Якщо клас існує то він видаляється, якщо не існує додається.

Не всі браузери підтримують.

Приклад:

var el= document.getElementById("test");
el.classList.toggle("t1"); //додаємо назву класу
el.classList.toggle("t1"); // видаляємо назву класу

var el= document.getElementById("test");
el.classList.add("t1"); //додаємо клас t1
el.classList.toggle("t1"); //видаляємо  клас t1
el.classList.toggle("t1"); // додаємо клас t1

alert( el.classList );

Аналог Element.classList.toggle:

function mToogle(el, clas, force){
if(force==true){
el.classList.add(clas);
}
else if(force==false){
el.classList.remove(clas);
}
else{
   if(el.classList.contains(clas))
     el.classList.remove(clas);
   else el.classList.add(clas);
}
}

var el= document.getElementById("test");
mToogle(el, "t1");
mToogle(el, "t1", true);
alert( el.classList );