javascript - 如何将类添加到给定元素？

Question

我有一个元素已经有一个类:

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

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

我该怎么做？

Answer 1

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

使用 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";

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

另见 element.className on MDN .