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

Try:

element.className='second'

函数更改（box）｛box.className='second'｝.first｛width:70px；height:70px，background:#ff0｝.second｛width:150px；height:150px，background:#f00；transition：1s｝<div onclick=“change（this）”class=“first”>单击我</div>

对之前的正则表达式进行了一些小注释和调整：

如果类列表不止一次包含类名，则需要全局执行该操作。而且，您可能希望从类列表的末尾去掉空格，并将多个空格转换为一个空格，以防止出现空格。如果只有使用类名的代码使用下面的正则表达式并在添加名称之前删除名称，那么这些都不会是问题。好吧，谁知道谁可能在篡改班级名单。

这个正则表达式是不区分大小写的，所以在不考虑类名中的大小写的浏览器上使用代码之前，可能会出现类名中的错误。

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, ' ') + "]");

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

这里有一个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。

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

下面是一个简单的jQuery代码：

$(".class1").click(function(argument) {
    $(".parentclass").removeClass("classtoremove");
    setTimeout(function (argument) {
        $(".parentclass").addClass("classtoadd");
    }, 100);
});

在这里

Class1是事件的侦听器。父类是托管要更改的类的类Classtoremove是您的旧类。要添加的类是要添加的新类。100是类被改变的超时延迟。