首先，给div一个ID。然后，调用函数appendClass：

<script language="javascript">
  function appendClass(elementId, classToAppend){
    var oldClass = document.getElementById(elementId).getAttribute("class");
    if (oldClass.indexOf(classToAdd) == -1)
    {
      document.getElementById(elementId).setAttribute("class", classToAppend);
    }
}
</script>

只是为了详细说明别人所说的内容，多个CSS类被组合在单个字符串中，并以空格分隔。因此，如果您想对其进行硬编码，它将看起来像这样：

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

从那里，您可以轻松派生添加新类所需的javascript ...只需在元素的className属性后添加一个空格，后跟新类。知道了这一点，您还可以编写一个函数，以在以后需要时删除类。

您可以使用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);
}

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

对于添加类：

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

对于删除类：

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

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

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

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

element.classList.remove("otherclass");

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

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

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;
}

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

另请参见MDN上的element.className。

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

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

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

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

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