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

这也适用于IE的早期版本。

function toogleClass(ele, class1) {

  var classes = ele.className;

  var regex = new RegExp('\\b' + class1 + '\\b');

  var hasOne = classes.match(regex);

  class1 = class1.replace(/\s+/g, '');

  if (hasOne)

    ele.className = classes.replace(regex, '');

  else

    ele.className = classes + class1;

}

.red {

  background-color: red

}

div {

  width: 100px;

  height: 100px;

  margin-bottom: 10px;

  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>