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

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

在这里

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

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

使用PeterBoughton的答案，这里有一个简单的跨浏览器函数来添加和删除类。

添加类：

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

删除类：

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

TL；博士：

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

OR

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

就是这样。

而且，如果你真的想知道原因并教育自己，那么我建议阅读彼得·布顿的答案。太完美了。

注：

这可以通过（文档或事件）实现：

按ID获取元素（）getElementsByClassName（）查询选择器（）查询选择器全部（）

我只是想把这个扔进去：

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

对于jQuery这样的库，这是最简单的：

<input type="button" onClick="javascript:test_byid();" value="id='second'" />

<script>
function test_byid()
{
    $("#second").toggleClass("highlight");
}
</script>

classList DOM API：

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

const el=document.getElementById（“main”）；console.log（el.classList）；<div class=“content wrapper animated”id=“main”></div>

我们可以在日志中观察到，我们正在取回一个对象，它不仅包含元素的类，还包含许多辅助方法和财产。此对象继承自接口DOMTokenList，该接口在DOM中用于表示一组空格分隔的令牌（如类）。

例子：

const el=document.getElementById（'container'）；函数addClass（）{el.classList.add（'newclass'）；}函数replaceClass（）{el.classList.replace（'fo'，'newFoo'）；}函数removeClass（）{el.classList.remove（'bar'）；}按钮{边距：20px；}.foo文件{颜色：红色；}.newFoo{颜色：蓝色；}.巴{背景色：粉蓝色；}.new类{边框：2px实心绿色；}<div class=“foo bar”id=“container”>“全身出汗”在natus error sit volupatim accusantium doloremque audantium，totam rem开胃酒，eaque ipsa quae ab illo inventore veritatis et准建筑风格的生活格言不明确。Nemo enim ipsam公司卷舌</div><button onclick=“addClass（）”>addClass</button><button onclick=“replaceClass（）”>replaceClass</button><button onclick=“removeClass（）”>removeClass</button>