如何在纯JavaScript中切换元素的类？

Question

我正在寻找一种方法将这个jQuery代码(在响应式菜单部分中使用)转换为纯JavaScript.

如果很难实现它,可以使用其他JavaScript框架.

$('.btn-navbar').click(function()
{
    $('.container-fluid:first').toggleClass('menu-hidden');
    $('#menu').toggleClass('hidden-phone');

    if (typeof masonryGallery != 'undefined') 
        masonryGallery();
});

提前致谢

Answer 1

2014答案:classList.toggle()是大多数浏览器的标准和支持.

较旧的浏览器可以使用classlist.js用于classList.toggle():

var menu = document.querySelector('.menu') // Using a class instead, see note below.
menu.classList.toggle('hidden-phone');

顺便说一句,你不应该使用ID(它们将全局变量泄漏到JS window对象中).

Answer 2

看一下这个例子:JS Fiddle

function toggleClass(element, className){
    if (!element || !className){
        return;
    }

    var classString = element.className, nameIndex = classString.indexOf(className);
    if (nameIndex == -1) {
        classString += ' ' + className;
    }
    else {
        classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+className.length);
    }
    element.className = classString;
}

Answer 3

这是用ES6实现的解决方案

const toggleClass = (el, className) => el.classList.toggle(className);

使用范例

toggleClass(document.querySelector('div.active'), 'active'); // The div container will not have the 'active' class anymore

Answer 4

不需要正则表达式只需使用类列表

var id=document.getElementById('myButton');


function toggle(el,classname){
if(el.classList.contains(classname)){
el.classList.remove(classname)
}
else{
el.classList.add(classname)
}
}




id.addEventListener('click',(e)=>{

toggle(e.target,'red')
})

.red{

background:red

}

<button id="myButton">Switch</button>

上面例子的简单用法

var id=document.getElementById('myButton');


function toggle(el,classname){
el.classList.toggle(classname)
}




id.addEventListener('click',(e)=>{

toggle(e.target,'red')
})

.red{

background:red

}

<button id="myButton">Switch</button>