当我正在做的工作不需要使用库时，我使用以下两个函数：

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

首先，给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>

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

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

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

element.classList.remove("otherclass");

我宁愿不添加任何空格和重复条目处理（使用document.className方法时需要这样做）。浏览器存在一些限制，但可以使用polyfills解决这些限制。

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

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

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

使用JavaScript添加类的两种不同方法

JavaScript提供了两种向HTML元素添加类的不同方式：

使用element.classList.add（）方法使用className属性

使用这两种方法，您可以同时添加一个或多个类。

1.使用element.classList.add（）方法

var element=document.querySelector（'.box'）；//使用加法//添加单个类element.classList.add（'color'）；//添加多个类element.classList.add（'订单'，'阴影'）；.box格式{宽度：200px；高度：100px；}.颜色{背景：天蓝；}.边框{边框：2px实心黑色；}.阴影{盒子阴影：5px 5px 5px灰色；}<div class=“box”>我的盒子</div>

2.使用element.className属性

注意：始终使用+=运算符，并在类名前添加一个空格，以使用classList方法添加类。

var element=document.querySelector（'.box'）；//使用className属性//添加单个类element.className+=“颜色”；//添加多个类element.className+='边框阴影'；.box格式{宽度：200px；高度：100px；}.颜色{背景：天蓝；}.边框{边框：2px实心黑色；}.阴影{盒子阴影：5px 5px 5px灰色；}<div class=“box”>我的盒子</div>

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