如何将类添加到给定元素？如果您只针对现代浏览器：如果您需要支持 Internet Explorer 9 或更低版本：

javascript dom-manipulation

2022-08-29 22:00:37

我有一个已经有类的元素：

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

现在，我想创建一个JavaScript函数，它将向（不是替换，而是添加）添加一个类。div

我该怎么做？

答案 1

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

使用 element.classList.add 添加一个类：

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

和 element.classList.remove 来删除一个类：

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

将空格加上新类的名称添加到元素的属性中。首先，在元素上放置一个，以便您可以轻松获取引用。classNameid

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

然后

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

请注意前面的空格。包含空格非常重要，否则它会损害类列表中位于其之前的现有类。otherclass

答案 2

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

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

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

element.classList.remove("otherclass");

我宁愿不必添加任何空白空间和重复的条目来处理自己（这是使用该方法时所必需的）。有一些浏览器限制，但您可以使用polyfills解决这些问题。document.className