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

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

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

我怎样才能做到这一点？

javascript dom-manipulation

如果需要支持 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之前的otherclass 。重要的是要包含空格，否则会损害类列表中之前的现有类。

另请参见MDN 上的 element.className 。

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

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

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

然后element.classList.remove删除一个类：

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

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

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

编辑：并且，如果您想从元素中删除类 -

element.classList.remove("otherclass");

我宁愿不必自己添加任何空白空间和重复条目（使用document.className方法时需要）。浏览器有一些限制，但是您可以使用polyfill来解决它们。

根据需要找到目标元素 “d”，然后：

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

您可以用更聪明的方法包装它，以检查是否存在，并检查空间需求等。

新增课程

交叉兼容

在下面的示例中，我们向<body>元素添加一个classname 。这是 IE-8 兼容的。

var a = document.body;
a.classList ? a.classList.add('classname') : a.className += ' classname';

这是以下内容的简写。

var a = document.body;
if (a.classList) {
    a.classList.add('wait');
} else {
    a.className += ' wait';
}

性能
如果您更关心交叉兼容性方面的性能，则可以将其缩短为以下速度，即快 4％。
```
var z = document.body;
document.body.classList.add('wait');
```

方便
或者，您可以使用 jQuery，但结果性能会大大降低。根据 jsPerf 慢 94％
```
$('body').addClass('wait');
```

删除课程

性能
如果您关注性能，则选择性地使用 jQuery 是删除类的最佳方法
```
var a = document.body, c = ' classname';
$(a).removeClass(c);
```

如果没有 jQuery，它的速度要慢 32％

var a = document.body, c = ' classname';
a.className = a.className.replace( c, '' );
a.className = a.className + c;

参考文献

使用原型

Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")

使用 YUI

YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")

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

对于添加类：

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

对于删除类：

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

当我所做的工作不能保证使用库时，我将使用以下两个功能：

function addClass( classname, element ) {
    var cn = element.className;
    //test for existance
    if( cn.indexOf( classname ) != -1 ) {
        return;
    }
    //add a space if the element already has class
    if( cn != '' ) {
        classname = ' '+classname;
    }
    element.className = cn+classname;
}

function removeClass( classname, element ) {
    var cn = element.className;
    var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
    cn = cn.replace( rxp, '' );
    element.className = cn;
}

假设您要做的不仅仅是添加一个类（例如，您还有异步请求等），我建议您使用Prototype或jQuery 之类的库。

这将使您几乎需要做的一切（包括此操作）变得非常简单。

因此，假设您现在在页面上有了 jQuery，则可以使用如下代码向元素添加类名（在这种情况下为加载）：

$(document).ready( function() {
  $('#div1').addClass( 'some_other_class' );
} );

查看jQuery API 浏览器以了解其他内容。

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

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

上面的代码将为 nameElem 添加（而不是替换）一个类 “anyclass”。同样，您可以使用 classList.remove（）方法删除一个类。

nameElem.classList.remove("anyclss")

要将附加类添加到元素：

要将类添加到元素中而不删除 / 影响现有值，请添加空格和新的类名，如下所示：

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

更改元素的所有类：

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

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

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

如果您不想使用 jQuery 并希望支持较旧的浏览器：

function addClass(elem, clazz) {
    if (!elemHasClass(elem, clazz)) {
        elem.className += " " + clazz;
    }
}

function elemHasClass(elem, clazz) {
    return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}

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

答案