可以使用classList.add或classList.remove方法从元素中添加/删除类。

var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")

上述代码将向nameElem添加（而不是替换）一个类“anyclass”。类似地，可以使用classList.remove（）方法删除类。

nameElem.classList.remove("anyclss")

首先，给div一个id。然后，调用函数appendClass：

<script language="javascript">
  function appendClass(elementId, classToAppend){
    var oldClass = document.getElementById(elementId).getAttribute("class");
    if (oldClass.indexOf(classToAdd) == -1)
    {
      document.getElementById(elementId).setAttribute("class", classToAppend);
    }
}
</script>

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

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

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

element.classList.remove("otherclass");

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

使用纯JavaScript将类添加到元素的另一种方法

对于添加类：

document.getElementById("div1").classList.add("classToBeAdded");

要删除类：

document.getElementById("div1").classList.remove("classToBeRemoved");

在YUI中，如果包含yuidom，则可以使用

YAHOO.util.Dom.addClass（'div1'，'className'）；

HTH

大多数人在getElementById上使用.classList.add，但我想在getElementByClassName上使用它。为此，我使用了如下的forEach：

document.getElementsByClassName（“类名”）.forEach（element=>element.classList.add（“new class”））；

但它不起作用，因为我发现getElementsByClassName返回的是HTML集合，而不是数组。为了处理这个问题，我使用以下代码将其转换为数组：

[…document.getElementsByClassName（“类名”）].forEach（element=>element.classList.add（“new class”））；