是的，有很多方法可以做到这一点。在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>

选项。

这里有一个小样式与classList的示例，让您了解您有哪些可用选项，以及如何使用classList完成您想要的操作。

样式与类别列表

style和classList之间的区别在于，使用style可以将其添加到元素的样式财产中，但classList有点控制元素的类（add、remove、toggle、contain），我将向您展示如何使用add和remove方法，因为它们是最流行的方法。

样式示例

如果要将margin-top属性添加到元素中，可以这样做：

// Get the Element
const el = document.querySelector('#element');

// Add CSS property 
el.style.margintop = "0px"
el.style.margintop = "25px" // This would add a 25px to the top of the element.

classList示例

假设我们有一个＜div class=“class-a class-b”＞，在本例中，我们已经向div元素添加了两个类，class-a和class-b，我们希望控制删除哪些类和添加哪些类。这就是classList变得方便的地方。

删除类-b

// Get the Element
const el = document.querySelector('#element');

// Remove class-b style from the element
el.classList.remove("class-b")

添加类-c

// Get the Element
const el = document.querySelector('#element');

// Add class-b style from the element
el.classList.add("class-c")

可以这样使用node.className：

document.getElementById('foo').className = 'bar';

根据PPK，这应该在Internet Explorer 5.5及更高版本中工作。

为了补充来自另一个流行框架Google Closures的信息，请查看他们的dom/classes类：

goog.dom.classes.add(element, var_args)

goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)

goog.dom.classes.remove(element, var_args)

选择元素的一个选项是使用goog.dom.query和CSS 3选择器：

var myElement = goog.dom.query("#MyElement")[0];

我在代码中使用了以下普通JavaScript函数。它们使用正则表达式和indexOf，但不需要在正则表达式中引用特殊字符。

function addClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) < 0) {
        el.className = (c0 + c1).replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

function delClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) >= 0) {
        el.className = c0.replace(c1, " ").replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

您也可以在现代浏览器中使用element.classList。

此外，您还可以扩展HTMLElement对象，以便添加添加、删除、切换和检查类的方法（要点）：

HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element;

HTMLElement.prototype.addClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
      this.className = this.className.trim() + ' ' + string[i];
    }
  }
}

HTMLElement.prototype.removeClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
  }
}

HTMLElement.prototype.toggleClass = function(string) {
  if (string) {
    if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
      this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
    } else {
      this.className = this.className.trim() + ' ' + string;
    }
  }
}

HTMLElement.prototype.hasClass = function(string) {
  return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className);
}

然后就这样使用（单击将添加或删除类）：

document.getElementById('yourElementId').onclick = function() {
  this.toggleClass('active');
}

这是演示。