如何向给定元素添加类？

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

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

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

我该怎么做？

当前回答

找到你想要的目标元素“d”，然后：

d.className += ' additionalClass'; //note the space

您可以用更聪明的方式来包装它，以检查预存在，检查空间需求等。。

其他回答

纯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";
})

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

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

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

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

使用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。

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

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

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

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

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

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

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

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

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

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

nameElem.classList.remove("anyclss")

推荐文章