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

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

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

nameElem.classList.remove("anyclss")

您可以使用类似于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>

在我的例子中，我在DOM中有多个称为主包装器的类，但我只想影响父主包装器。使用：第一选择器(https://api.jquery.com/first-selector/)，我可以选择第一个匹配的DOM元素。这是我的解决方案：

$(document).ready( function() {
    $('.main-wrapper:first').addClass('homepage-redesign');
    $('#deals-index > div:eq(0) > div:eq(1)').addClass('doubleheaderredesign');
} );

我还对DOM中特定div的第二个孩子做了同样的事情，正如您在代码中看到的那样，我使用了$（'#deals index>div:eq（0）>div:eq（1）'）.addClass（'doubleheadrredesign'）；。

注意：如您所见，我使用了jQuery。

如果您只针对现代浏览器：

使用element.classList.add添加类：

element.classList.add("my-class");

和element.classList.remove删除类：

element.classList.remove("my-class");

如果您需要支持Internet Explorer 9或更低版本：

在元素的className属性中添加一个空格加上新类的名称。首先，在元素上放置一个id，这样就可以轻松地获得引用。

<div id="div1" class="someclass">
    <img ... id="image1" name="image1" />
</div>

然后

var d = document.getElementById("div1");
d.className += " otherclass";

注意其他类之前的空格。包含空间很重要，否则它会损害类列表中前面的现有类。

另请参见MDN上的element.className。

大多数人在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”））；

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

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

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

element.classList.remove("otherclass");

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