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

How do I toggle an element's class in pure JavaScript?

提问by max imax

I'm looking for a way to convert this jQuery code (which is used in responsive menu section) to pure JavaScript.

我正在寻找一种方法来将此 jQuery 代码（用于响应式菜单部分）转换为纯 JavaScript。

If it's hard to implement it's OK to use other JavaScript frameworks.

如果很难实现，可以使用其他 JavaScript 框架。

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

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

回答by mikemaccana

2014 answer: classList.toggle()is the standard and supported by most browsers.

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

Older browsers can use use classlist.js for classList.toggle():

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

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

As an aside, you shouldn't be using IDs (they leak globals into the JS windowobject).

顺便说一句，您不应该使用 ID（它们会将全局变量泄漏到 JSwindow对象中）。

回答by Eugene Yastrebov

Take a look at this example: JS Fiddle

看看这个例子：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;
}

回答by Gor

Here is solution implemented with ES6

这是用 ES6 实现的解决方案

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

usage example

使用示例

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

回答by RRK

This one works in earlier versions of IE also.

这也适用于早期版本的 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>

回答by mushishi78

This is perhaps more succinct:

这可能更简洁：

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(' ');
}

回答by Rajbir Sharma

Try this (hopefully it will work):

试试这个（希望它会起作用）：

// 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`

回答by Christiyan

If you want to toggle a class to an element using native solution, you could try this suggestion. I have tasted it in different cases, with or without other classes onto the element, and I think it works pretty much:

如果您想使用本机解决方案将类切换到元素，您可以尝试此建议。我在不同的情况下尝过它，在元素上有或没有其他类，我认为它非常有效：

(function(objSelector, objClass){
   document.querySelectorAll(objSelector).forEach(function(o){
      o.addEventListener('click', function(e){
        var $this = e.target,
            klass = $this.className,
            findClass = new RegExp('\b\s*' + objClass + '\S*\s?', 'g');

        if( !findClass.test( $this.className ) )
            if( klass ) 
                $this.className = klass + ' ' + objClass;
            else 
                $this.setAttribute('class', objClass);
        else 
        {
            klass = klass.replace( findClass, '' );
            if(klass) $this.className = klass;
            else $this.removeAttribute('class');
        }
    });
  });
})('.yourElemetnSelector', 'yourClass');

回答by P. Lefèvre

Here is a code for IE >= 9 by using split(" ") on the className :

这是通过在 className 上使用 split(" ") IE >= 9 的代码：

function toggleClass(element, className) {
    var arrayClass = element.className.split(" ");
    var index = arrayClass.indexOf(className);

    if (index === -1) {
        if (element.className !== "") {
            element.className += ' '
        }
        element.className += className;
    } else {
        arrayClass.splice(index, 1);
        element.className = "";
        for (var i = 0; i < arrayClass.length; i++) {
            element.className += arrayClass[i];
            if (i < arrayClass.length - 1) {
                element.className += " ";
            }
        }
    }
}