为了详细说明其他人所说的，多个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。

对于使用Lodash并希望更新className字符串的用户：

// get element reference
var elem = document.getElementById('myElement');

// add some classes. Eg. 'nav' and 'nav header'
elem.className = _.chain(elem.className).split(/[\s]+/).union(['nav','navHeader']).join(' ').value()

// remove the added classes
elem.className = _.chain(elem.className).split(/[\s]+/).difference(['nav','navHeader']).join(' ').value()

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

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

这个js代码适合我

提供类名替换

var DDCdiv = hEle.getElementBy.....

var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
    if (Ta[i] == 'visible'){
        Ta[i] = 'hidden';
        break;// quit for loop
    }
    else if (Ta[i] == 'hidden'){
        Ta[i] = 'visible';
    break;// quit for loop
    }
}
DDCdiv.setAttribute('class',Ta.join(' ') );  // Join array with space and set class name

添加仅使用

var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
Ta.push('New class name');
// Ta.push('Another class name');//etc...
DDCdiv.setAttribute('class',Ta.join(' ') );  // Join array with space and set class name

删除使用

var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array

for (var i=0; i< Ta.length;i++)
{
    if (Ta[i] == 'visible'){
        Ta.splice( i, 1 );
        break;// quit for loop
    }
}
DDCdiv.setAttribute('class',Ta.join(' ') );  // Join array with space and set class name

希望这对忧郁的人有帮助