如何使用 JavaScript 更改元素的类？

用于更改类的现代 HTML5 技术

现代浏览器添加了 classList，它提供了无需库即可更轻松地操作类的方法：

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

不幸的是，这些在 v10 之前的 Internet Explorer 中不起作用，尽管有一个 shim 来添加对 IE8 和 IE9 的支持，可从 this page 获得。但是，它变得越来越多supported。

简单的跨浏览器解决方案

选择元素的标准 JavaScript 方法是使用 document.getElementById("Id")，这就是以下示例所使用的 - 您当然可以通过其他方式获取元素，并且在正确的情况下可以简单地使用 this 代替 - 但是，详细说明关于这个超出了答案的范围。

要更改元素的所有类：

要将所有现有类替换为一个或多个新类，请设置 className 属性：

document.getElementById("MyElement").className = "MyClass";

（您可以使用空格分隔的列表来应用多个类。）

向元素添加附加类：

要将类添加到元素，而不删除/影响现有值，请附加一个空格和新的类名，如下所示：

document.getElementById("MyElement").className += " MyClass";

从元素中删除一个类：

要将单个类删除到元素，而不影响其他潜在类，需要简单的正则表达式替换：

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */

这个正则表达式的解释如下：

(?:^|\s) # Match the start of the string or any single whitespace character

MyClass  # The literal text for the classname to remove

(?!\S)   # Negative lookahead to verify the above is the whole classname
         # Ensures there is no non-space character following
         # (i.e. must be the end of the string or space)

g 标志告诉替换根据需要重复，以防类名被多次添加。

要检查一个类是否已经应用于一个元素：

上面用于删除类的相同正则表达式也可以用作检查特定类是否存在：

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )

虽然可以直接在 HTML 事件属性（例如 onclick="this.className+=' MyClass'"）内编写 JavaScript，但不建议这样做。尤其是在较大的应用程序中，通过将 HTML 标记与 JavaScript 交互逻辑分离来实现更可维护的代码。

实现这一点的第一步是创建一个函数，并在 onclick 属性中调用该函数，例如：

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

（脚本标签中不需要此代码，这只是为了简化示例，将 JavaScript 包含在不同的文件中可能更合适。）

第二步是将 onclick 事件从 HTML 中移到 JavaScript 中，例如使用 addEventListener

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }

    window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</button>

（请注意，window.onload 部分是必需的，以便在 HTML 完成加载后执行该函数的内容 - 没有这个，在调用 JavaScript 代码时 MyElement 可能不存在，因此该行将失败。）

JavaScript 框架和库

上面的代码都是标准的 JavaScript，但是，通常的做法是使用框架或库来简化常见任务，并从编写代码时可能不会想到的固定错误和边缘情况中受益。

虽然有些人认为添加一个大约 50 KB 的框架来简单地更改一个类是过度的，但如果您正在做大量的 JavaScript 工作或任何可能具有不寻常的跨浏览器行为的事情，那么值得考虑。

（非常粗略地说，库是为特定任务设计的一组工具，而框架通常包含多个库并执行一套完整的职责。）

上面的示例在下面使用 jQuery 进行了复制，这可能是最常用的 JavaScript 库（尽管还有其他值得研究的库）。

（注意这里的 $ 是 jQuery 对象。）

使用 jQuery 更改类：

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

此外，jQuery 提供了一个快捷方式来添加一个不适用的类，或者删除一个适用的类：

$('#MyElement').toggleClass('MyClass');

$('#MyElement').click(changeClass);

或者，不需要 id：

$(':button:contains(My Button)').click(changeClass);

---

你也可以这样做：

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

并切换一个类（如果存在则删除，否则添加它）：

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

---

在我的一个不使用 jQuery 的旧项目中，我构建了以下函数来添加、删除和检查元素是否具有类：

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!hasClass(ele, cls))
        ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

因此，例如，如果我希望 onclick 向按钮添加一些类，我可以使用它：

<script type="text/javascript">
    function changeClass(btn, cls) {
        if(!hasClass(btn, cls)) {
            addClass(btn, cls);
        }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>

现在可以肯定的是，使用 jQuery 会更好。

---

您可以像这样使用 node.className：

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

这应该在 Internet Explorer 5.5 及以上根据 PPK 工作。

---

哇，很惊讶这里有这么多矫枉过正的答案......

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

---

使用纯 JavaScript 代码：

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

function replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}

---

这对我有用：

function setCSS(eleID) {
    var currTabElem = document.getElementById(eleID);

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}

---

可能的 4 种操作：添加、删除、检查和切换

让我们看看每个动作的多种方式。

1.添加类

方法 1： 在现代浏览器中添加类的最佳方法是使用元素的 classList.add() 方法。

案例一：添加单类函数 addClass() { let element = document.getElementById('id1'); // 添加类 element.classList.add('beautify'); }

案例2：添加多个类在add()方法中添加多个类，用逗号分隔类 function addClass() { let element = document.getElementById('id1'); // 添加多个类 element.classList.add('class1', 'class2', 'class3'); }

方法 2 - 您还可以使用 className 属性向 HTML 元素添加类。

案例 1：覆盖预先存在的类 当您将新类分配给 className 属性时，它会覆盖以前的类。函数 addClass() { 让元素 = document.getElementById('id1'); // 添加多个类 element.className = 'beautify'; }

案例 2：添加类而不覆盖 对类使用 += 运算符不覆盖以前的类。还要在新课前添加一个额外的空间。函数 addClass() { 让元素 = document.getElementById('id1'); // 添加单个多个类 element.className += 'beautify'; // 添加多个类 element.className += 'class1 class2 class3'; }

2.删除类

方法 1 - 从元素中删除类的最佳方法是 classList.remove() 方法。

案例1：删除单个类只需在方法中传递要从元素中删除的类名即可。函数 removeClass() { 让元素 = document.getElementById('id1'); // 移除类 element.classList.remove('beautify'); }

案例2：移除多个类传递多个类，用逗号隔开。函数 removeClass() { 让元素 = document.getElementById('id1'); // 移除类 element.classList.remove('class1', 'class2', 'class3'); }

方法 2 - 您还可以使用 className 方法删除类。

案例 1：删除单个类 如果元素只有 1 个类并且您想要删除它，那么只需将一个空字符串分配给 className 方法。函数 removeClass() { 让元素 = document.getElementById('id1'); // 移除类 element.className = ''; }

案例2：删除多个类如果元素有多个类，首先使用className属性从元素中获取所有类，然后使用replace方法将所需的类替换为空字符串，最后将其分配给元素的className属性。函数 removeClass() { 让元素 = document.getElementById('id1'); // 移除类 element.className = element.className.replace('class1', ''); }

3.检查类

要检查元素中是否存在类，您可以简单地使用 classList.contains() 方法。如果类存在则返回 true，否则返回 false。

function checkClass() {
  let element = document.getElementById('id1');

  // checking class
  if(element.classList.contains('beautify') {
      alert('Yes! class exists');
  }
}

4.切换类

要切换类，请使用 classList.toggle() 方法。

function toggleClass() {
    let element = document.getElementById('id1');

    // toggle class
    element.classList.toggle('beautify');
}

---

您也可以扩展 HTMLElement 对象，以添加方法来添加、删除、切换和检查类 (gist)：

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

这是demo。

---

只需添加来自另一个流行框架 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];

---

对以前的正则表达式的一些小注释和调整：

如果类列表中的类名不止一次，您需要在全局范围内执行此操作。而且，您可能希望从类列表的末尾去除空格并将多个空格转换为一个空格，以防止出现空格。如果使用类名的唯一代码使用下面的正则表达式并在添加之前删除名称，那么这些事情都不会成为问题。但。好吧，谁知道谁可能会在班级名单上大吃一惊。

此正则表达式不区分大小写，因此在代码用于不关心类名大小写的浏览器之前，类名中的错误可能会出现。

var s = "testing   one   four  one  two";
var cls = "one";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "test";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "testing";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "tWo";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");

---

在 ASP.NET 中使用 JavaScript 更改元素的 CSS 类：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
        lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
    End If
End Sub

---

我会使用 jQuery 并编写如下内容：

jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});

此代码添加了一个在单击 id some-element 的元素时要调用的函数。如果它还不是元素的一部分，则该函数将 clicked 附加到元素的 class 属性，如果它在那里，则将其删除。

是的，您确实需要在页面中添加对 jQuery 库的引用才能使用此代码，但至少您可以确信该库中的大多数功能几乎可以在所有现代浏览器上运行，并且可以节省您的时间实现你自己的代码来做同样的事情。

---

线

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')

应该：

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');

---

在支持 Internet Explorer 6 的原生 JavaScript 中更改元素的类

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

function getClassNode(element) { for (var i = element.attributes.length; i--;) if (element.attributes[i].nodeName === 'class') return element.attributes[i]; } function removeClass(classNode, className) { var index, classList = classNode.value.split(' '); if ((index = classList.indexOf(className)) > -1) { classList.splice(index, 1); classNode.value = classList.join(' '); } } 函数 hasClass(classNode, className) { return classNode.value.indexOf(className) > -1; } function 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); }) .red { color: red; } .red:before { content: '我是红色的！ '; } .red:after { 内容：'再次'; } .blue { 颜色：蓝色； } .blue:before { content: '我是蓝色的！ ' } 点我

---

这是我的版本，可以正常工作：

function addHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    obj.className += " " + classname
}

function removeHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    var classes = ""+obj.className
    while (classes.indexOf(classname)>-1) {
        classes = classes.replace (classname, "")
    }
    obj.className = classes
}

用法：

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >

---

这是一个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;
}

请参阅the JSFiddle。

另请参阅我的答案 here 以动态创建新类。

---

我在我的代码中使用了以下 vanilla 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。

---

OP 问题是如何使用 JavaScript 更改元素的类？

现代浏览器允许您使用一行 JavaScript 来做到这一点：

document.getElementById('id').classList.replace('span1', 'span2')

classList 属性提供具有 variety of methods 的 DOMTokenList。您可以使用 add()、remove() 或 replace() 等简单操作对元素的 classList 进行操作。或者像使用 keys()、values() 和 entries() 的对象或 Map 一样获得非常复杂和操作类。

Peter Boughton's answer 很不错，但它现在已有十多年的历史了。所有现代浏览器现在都支持 DOMTokenList - 请参阅 https://caniuse.com/#search=classList，甚至 Internet Explorer 11 都支持一些 DOMTokenList 方法。

---

选项。

下面是一些样式与 classList 的小示例，可让您了解您有哪些可用选项以及如何使用 classList 来做您想做的事。

样式与类列表

style 和 classList 之间的区别在于，使用 style 您添加到元素的样式属性，但 classList 有点控制元素的类（add、{6 }、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.

类列表示例

假设我们有一个 <div class="class-a class-b">，在这种情况下，我们已经向 div 元素添加了 2 个类，class-a 和 class-b，我们想要控制哪些类 remove 和add 的类别。这就是 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")

---

尝试：

element.className='second'

函数更改（框） { box.className='second' } .first { 宽度：70px;高度：70px；背景：#ff0 } .second { 宽度：150px;高度：150px；背景：#f00；过渡：1s }

---

对于 IE v6-9（其中不支持 classList 并且您不想使用 polyfill）：

var elem = document.getElementById('some-id');

// don't forget the extra space before the class name
var classList = elem.getAttribute('class') + ' other-class-name';

elem.setAttribute('class', classList);

---

好的，我认为在这种情况下你应该使用 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');

---

类列表 DOM API：

添加和删除类的一种非常方便的方式是 classList DOM API。该 API 允许我们选择特定 DOM 元素的所有类，以便使用 JavaScript 修改列表。例如：

const el = document.getElementById("main");控制台.log(el.classList);

我们可以在日志中观察到，我们返回的对象不仅包含元素的类，还包含许多辅助方法和属性。该对象继承自接口 DOMTokenList，该接口在 DOM 中用于表示一组空格分隔的标记（如类）。

例子：

const el = document.getElementById('container');函数 addClass () { el.classList.add('newclass'); } function replaceClass () { el.classList.replace('foo', 'newFoo'); } 函数 removeClass () { el.classList.remove('bar'); } 按钮{ 边距：20px; } .foo{ 颜色：红色； } .newFoo { 颜色：蓝色； } .bar{ 背景颜色：粉蓝色； } .newclass{ 边框：2px 纯绿色； }

AddClass ReplaceClass 移除类

---

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

const tabs=document.querySelectorAll('.menu li'); for(let tab of tab){ tab.onclick = function(){ let activetab = document.querySelectorAll('li.active'); activetab[0].classList.remove('active') tab.classList.add('active'); } } 身体 { 填充：20px;字体系列：无衬线； } ul { 边距：20px 0;列表样式：无； }李{背景：#dfdfdf;填充：10px；边距：6px 0；光标：指针； } li.active { 背景：#2794c7;字体粗细：粗体；颜色：#ffffff； } 请点击一个项目：

• 三个
• 两个
• 一个

---

只是想我会把这个扔进去：

function inArray(val, ary){
  for(var i=0,l=ary.length; i<l; i++){
    if(ary[i] === val){
      return true;
    }
  }
  return false;
}
function removeClassName(classNameS, fromElement){
  var x = classNameS.split(/\s/), s = fromElement.className.split(/\s/), r = [];
  for(var i=0,l=s.length; i<l; i++){
    if(!iA(s[i], x))r.push(s[i]);
  }
  fromElement.className = r.join(' ');
}
function addClassName(classNameS, toElement){
  var s = toElement.className.split(/\s/);
  s.push(c); toElement.className = s.join(' ');
}

---

只需使用 myElement.classList="new-class"，除非您需要维护其他现有类，在这种情况下您可以使用 classList.add, .remove 方法。

var doc = 文档； var divOne = doc.getElementById("one"); var goButton = doc.getElementById("go"); goButton.addEventListener("click", function() { divOne.classList="blue"; }); div { 最小高度：48px;最小宽度：48px； } .bordered{ 边框：1px 纯黑色； } .green{ 背景：绿色； } .blue{ 背景：蓝色； } 更改类

---

TL;博士：

document.getElementById('id').className = 'class'

或者

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

而已。

而且，如果您真的想知道原因并自学，那么我建议您阅读 Peter Boughton's answer。这是完美的。

笔记：

这可以通过 (document 或 event) 实现：

getElementById()

getElementsByClassName()

查询选择器（）

查询选择器全部（）

---

function classed(el, class_name, add_class) {
  const re = new RegExp("(?:^|\\s)" + class_name + "(?!\\S)", "g");
  if (add_class && !el.className.match(re)) el.className += " " + class_name
  else if (!add_class) el.className = el.className.replace(re, '');
}

使用 Peter Boughton's answer，这里有一个简单的跨浏览器函数来添加和删除类。

添加类：

classed(document.getElementById("denis"), "active", true)

删除类：

classed(document.getElementById("denis"), "active", false)

---

JavaScript 中有一个属性 className 可以更改 HTML 元素的类名。现有的类值将替换为您在 className 中分配的新值。

<!DOCTYPE html>
<html>
<head>
<title>How can I change the class of an HTML element in JavaScript?</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 align="center"><i class="fa fa-home" id="icon"></i></h1><br />

<center><button id="change-class">Change Class</button></center>

<script>
var change_class = document.getElementById("change-class");
change_class.onclick = function()
{
    var icon=document.getElementById("icon");
    icon.className = "fa fa-gear";
}
</script>
</body>
</html>

信用 - How To Change Class Name of an HTML Element in JavaScript

---