这里有一个toggleClass来切换/添加/删除元素上的类：

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
    var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
    var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));

    elem.className=elem.className.replace(matchRegExp, ''); // clear all
    if (add) elem.className += ' ' + theClass;
}

参见JSFiddle。

也可以在这里看到动态创建新类的答案。

哇，奇怪这里有这么多过分的答案。。。

<div class="firstClass" onclick="this.className='secondClass'">

是的，有很多方法可以做到这一点。在ES6语法中，我们可以很容易地实现。使用此代码切换添加和删除类。

const tabs=document.querySelectorAll（'.menu-li'）；for（制表符的let制表符）{tab.onclick=函数（）{let activetab=document.querySelectorAll（'li.active'）；activetab[0].classList.remove（'active'）tab.classList.add（'active'）；}}正文{填充：20px；字体系列：无衬线；}上一页{边距：20px 0；列表样式：无；}李{背景：#dfdfdf；填充：10px；边距：6px 0；光标：指针；}li.活动{背景：#2794c7；字号：粗体；颜色：#ffffff；}<i> 请单击项目：</i><ul class=“menu”><li class=“active”><span>三个</span></li><li>两个</span></li><li>一个</span></li></ul>

在支持Internet Explorer 6的普通JavaScript中更改元素的类

您可以尝试使用node attributes属性来保持与旧浏览器（甚至Internet Explorer 6）的兼容性：

函数getClassNode（元素）{对于（var i=element.attributes.length；i-；）if（element.attributes[i].nodeName=='class'）return元素.attributes[i]；}函数removeClass（classNode，className）{var索引，classList=classNode.value.split（“”）；如果（（index=classList.indexOf（className））>-1）{classList.拼接（索引，1）；classNode.value=classList.join（“”）；}}函数hasClass（classNode，className）{return classNode.value.indexOf（className）>-1；}函数addClass（classNode，className）{if（！hasClass（classNode，className））classNode.value+=“”+className；}document.getElementById（'message'）.addEventListener（'click'，function（）{var classNode=getClassNode（this）；var className=hasClass（classNode，“red”）&&“blue”| |“red”；removeClass（classNode，'red'）；removeClass（classNode，'blue'）；addClass（classNode，className）；}).红色{颜色：红色；}.红色：之前{内容：“我红了！”；}.红色：之后{content:'再次'；}.蓝色{颜色：蓝色；}.蓝色：之前{内容：“我是蓝色的！”}<span id=“message”class=“”>单击我</span>

你也可以这样做：

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

要切换类（如果存在则删除，否则添加）：

document.getElementById('id').classList.toggle('class');

好的，我认为在这种情况下，您应该使用jQuery或用纯JavaScript编写自己的方法。我的首选是添加我自己的方法，而不是将所有jQuery注入到我的应用程序中，如果我出于其他原因不需要的话。

我想在我的JavaScript框架中添加一些处理添加类、删除类等的功能。类似于jQuery，IE9+完全支持这一点。另外，我的代码是用ES6编写的，所以您需要确保浏览器支持它，或者使用类似Babel的语言，否则需要在代码中使用ES5语法。同样通过这种方式，我们通过ID查找元素，这意味着元素需要有一个要选择的ID：

// Simple JavaScript utilities for class management in ES6
var classUtil = {

  addClass: (id, cl) => {
    document.getElementById(id).classList.add(cl);
  },

  removeClass: (id, cl) => {
    document.getElementById(id).classList.remove(cl);
  },

  hasClass: (id, cl) => {
    return document.getElementById(id).classList.contains(cl);
  },

  toggleClass: (id, cl) => {
    document.getElementById(id).classList.toggle(cl);
  }

}

您可以简单地使用它们，如下所示。假设元素的id为“id”，类为“class”。确保将它们作为字符串传递。您可以按如下方式使用该实用程序：

classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');