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

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

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

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

var doc=文档；var divOne=doc.getElementById（“一”）；var goButton=doc.getElementById（“go”）；goButton.addEventListener（“单击”，函数（）{divOne.classList=“蓝色”；});第二部分{最小高度：48px；最小宽度：48px；}.有边框{边框：1px实心黑色；}.绿色{背景：绿色；}.蓝色{背景：蓝色；}<button id=“go”>更改类别</button><div id=“one”class=“borded green”></div>

在支持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>

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>

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

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

1.添加类

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

案例1：添加单个类函数addClass（）{let element=document.getElementById（'id1'）；//添加类element.classList.add（'beautify'）；}案例2：添加多个类在add（）方法中通过逗号添加多个类函数addClass（）{let element=document.getElementById（'id1'）；//添加多个类element.classList.add（'class1'，'class2'，'class3'）；}

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

案例1：重写预先存在的类当您将新类分配给className属性时，它将覆盖上一个类。函数addClass（）{let element=document.getElementById（'id1'）；//添加多个类element.className=“美化”；}案例2：添加类而不覆盖对类使用+=运算符不覆盖以前的类。此外，在新类之前添加额外的空间。函数addClass（）{let element=document.getElementById（'id1'）；//添加单个多个类element.className+=“美化”；//添加多个类element.className+=“class1 class2 class3”；}

2.删除类

方法1-从元素中移除类的最佳方法是classList.remove（）方法。

案例1：删除单个类只需在方法中传递要从元素中删除的类名。函数removeClass（）{let element=document.getElementById（'id1'）；//删除类element.classList.remove（'beautify'）；}案例2：删除多个类传递用逗号分隔的多个类。函数removeClass（）{let element=document.getElementById（'id1'）；//删除类element.classList.remove（'class1'，'class2'，'class3'）；}

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

案例1：删除单个类如果元素只有一个类，并且您想要删除它，那么只需为className方法分配一个空字符串。函数removeClass（）{let element=document.getElementById（'id1'）；//删除类element.className=“”；}案例2：删除多个类如果元素有多个类，首先使用className属性从元素中获取所有类，然后使用replace方法，用空字符串替换所需的类，最后将其分配给元素的className属性。函数removeClass（）{let element=document.getElementById（'id1'）；//删除类element.className=element.cclassName.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.tggle（）方法。

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

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

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