如何在纯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

classList.toggle()是大多数浏览器的标准配置和支持。较旧的浏览器可以将use 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 Fiddlefunction 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

这也适用于IE的早期版本。function toogleClass(ele, class1) {&nbsp; var classes = ele.className;&nbsp; var regex = new RegExp('\\b' + class1 + '\\b');&nbsp; var hasOne = classes.match(regex);&nbsp; class1 = class1.replace(/\s+/g, '');&nbsp; if (hasOne)&nbsp; &nbsp; ele.className = classes.replace(regex, '');&nbsp; else&nbsp; &nbsp; ele.className = classes + class1;}.red {&nbsp; background-color: red}div {&nbsp; width: 100px;&nbsp; height: 100px;&nbsp; margin-bottom: 10px;&nbsp; border: 1px solid black;}<div class="does red redAnother " onclick="toogleClass(this, 'red')"></div><div class="does collapse navbar-collapse " onclick="toogleClass(this, 'red')"></div>