您可以使用类似于jQuery的现代方法

如果您只需要更改一个元素，即JS将在DOM中找到的第一个元素，则可以使用以下方法：

document.querySelector（'.someclass'）.className+=“red”；.红色{颜色：红色；}<div class=“someclass”><p>此方法将仅向DOM中的第一个元素添加类“red”</p></div><div class=“someclass”><p>洛雷姆ipsum</p></div><div class=“someclass”><p>洛雷姆ipsum</p></div><div class=“someclass”><p>洛雷姆ipsum</p></div>

请记住在类名前留一个空格。

如果您有多个要添加新类的类，可以这样使用

document.querySelectorAll（'.someclass'）.forEach（函数（元素）{element.className+=“红色”；});.红色{颜色：红色；}<div class=“someclass”><p>此方法将向DOM中具有“someclass”类的所有元素添加类“red”</p＞</div><div class=“someclass”><p>洛雷姆ipsum</p></div><div class=“someclass”><p>洛雷姆ipsum</p></div><div class=“someclass”><p>洛雷姆ipsum</p></div>

为了详细说明其他人所说的，多个CSS类组合在一个字符串中，由空格分隔。因此，如果您想对其进行硬编码，它只需如下所示：

<div class="someClass otherClass yetAnotherClass">
      <img ... id="image1" name="image1" />
</div>

从那里，您可以很容易地导出添加新类所需的javascript。。。只需在元素的className属性中添加一个空格，后跟新类。知道了这一点，您还可以编写一个函数，以便以后在需要时删除类。

在没有任何框架的情况下，最简单的方法是使用element.classList.add方法。

var element = document.getElementById("div1");
element.classList.add("otherclass");

编辑：如果要从元素中删除类-

element.classList.remove("otherclass");

我宁愿不添加任何空格和重复条目处理（使用document.className方法时需要这样做）。浏览器存在一些限制，但可以使用polyfills解决这些限制。

添加类

交叉兼容在下面的示例中，我们向＜body＞元素添加类名。这与IE-8兼容。var a=文档正文；a.classList？a.classList.add（'classname'）：a.classname+='classname'；这是以下内容的简写。。var a=文档正文；if（a.classList）{a.classList.add（'wait'）；}其他{a.className+=“等待”；}

表演如果您更关心性能而不是交叉兼容性，可以将其缩短为以下值，即速度提高4%。var z=文档正文；document.body.classList.add（'wait'）；

方便或者，您可以使用jQuery，但结果的性能会明显降低。根据jsPerf，速度降低了94%$（'body'）.addClass（'wait'）；

正在删除类

表演如果您关注性能，那么有选择地使用jQuery是删除类的最佳方法var a=document.body，c=“类名”；$（a）.removeClass（c）；

没有jQuery，速度会慢32%var a=document.body，c=“类名”；a.className=a.className.replace（c，“”）；a.className=a.className+c；

工具书类

jsPerf测试用例：添加类jsPerf测试用例：删除类

使用原型

Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")

使用YUI

YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")

要向元素添加其他类，请执行以下操作：

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

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

要更改元素的所有类，请执行以下操作：

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

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

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

纯JS示例。在第一个示例中，我们获取元素的id并添加例如2个类。

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})

在第二个示例中，我们获取元素的类名并再添加1。

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})