如何在纯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() is the standard and supported by most browsers。

较旧的浏览器可以使用classList.toggle()：

use classlist.js for classList.toggle()

顺便说一句，您不应该使用ID（

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

）。

Answer 2

看这个例子：they leak globals into the JS window object

window

Answer 3

这里是通过ES6实现的解决方案

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 4

这也可以在早期版本的IE中使用。

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

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

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;
}

Answer 5

这可能更简洁：

.red {
  background-color: red
}
div {
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
  border: 1px solid black;
}

Answer 6

尝试一下（希望它能起作用）：

<div class="does red redAnother " onclick="toogleClass(this, 'red')"></div>

<div class="does collapse navbar-collapse " onclick="toogleClass(this, 'red')"></div>

Answer 7

这里是IE> = 9的代码，通过在className上使用split（“”）：

function toggle(element, klass) {
  var classes = element.className.match(/\S+/g) || [],
      index = classes.indexOf(klass);

  index >= 0 ? classes.splice(index, 1) : classes.push(klass);
  element.className = classes.join(' ');
}

Answer 8

如果要使用本机解决方案将类切换到元素，则可以尝试此建议。我在不同的情况下都尝试过，无论是否在元素上添加其他类，我都认为它很有效：

// mixin (functionality) for toggle class 
function hasClass(ele, clsName) {
    var el = ele.className;
    el = el.split(' ');
    if(el.indexOf(clsName) > -1){
        var cIndex = el.indexOf(clsName);
        el.splice(cIndex, 1);
        ele.className = " ";
        el.forEach(function(item, index){
          ele.className += " " + item;
        })
    }
    else {
        el.push(clsName);
        ele.className = " ";
        el.forEach(function(item, index){
          ele.className += " " + item;
        })
    }
}

// get all DOM element that we need for interactivity.

var btnNavbar =  document.getElementsByClassName('btn-navbar')[0];
var containerFluid =  document.querySelector('.container-fluid:first');
var menu = document.getElementById('menu');

// on button click job
btnNavbar.addEventListener('click', function(){
    hasClass(containerFluid, 'menu-hidden');
    hasClass(menu, 'hidden-phone');
})`enter code here`