如何使用纯JavaScript切换元素的类？

Question

如何使用纯JavaScript切换元素的类？

174

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

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

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

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

- max imax

1

https://dev59.com/6HVC5IYBdhLWcg3wvT7g - Johan

14

document.getElementById("menu").classList.toggle("hidden-phone")： - Bergi

classList在一些浏览器中不受支持：http://caniuse.com/classlist - Kevin Whitaker

7

嘿 @max，想要选择一个答案了吗？ - mikemaccana

2

旁白：Max在接下来的七年里没有选择答案，而Mike并不知道，在写下这句话后不久，他会离婚。 - mikemaccana

13个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Abass Dev · Answer 1

function navbarToggler() {
  const collapseBtn = document.querySelector('.collapseBtn').classList
  collapseBtn.toggle('collapse')
}

- Seth M. · Answer 2

我知道我来晚了，但我碰巧看到这个并且有一个建议。对于那些寻求跨浏览器支持的人，我不建议通过JS进行类切换。它可能需要更多的工作，但是在所有浏览器中都更受支持。

document.getElementById("myButton").addEventListener('click', themeswitch);

function themeswitch() {
  const Body = document.body
  if (Body.style.backgroundColor === 'white') {
    Body.style.backgroundColor = 'black';
  } else {
    Body.style.backgroundColor = 'white';
  }
}

body {
  background: white;
}

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

- Rajbir Sharma · Answer 3

试一下这个（希望它能够工作）：

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