document.getElementById('some_id').className+='  someclassname'

OR:

document.getElementById('some_id').classList.add('someclassname')

当第二种方法不起作用时，第一种方法有助于添加类。在第一种方法中，不要忘记在“someclassname”前面留一个空格。

对于删除，您可以使用：

document.getElementById('some_id').classList.remove('someclassname')

您可以使用API querySelector来选择元素，然后以元素和新类名作为参数创建函数。在现代浏览器中使用classlist，在IE8中使用else。然后，您可以在事件后调用该函数。

 //select the dom element
 var addClassVar = document.querySelector('.someclass');

 //define the addclass function
 var addClass = function(el,className){
   if (el.classList){
     el.classList.add(className);
   }
   else {
     el.className += ' ' + className;
  }
};

//call the function
addClass(addClassVar, 'newClass');

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

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

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

我知道IE9已经正式关闭，我们可以使用element.classList实现它，正如上面很多人所说的那样，但我只是在上面的许多答案的帮助下尝试学习它如何在没有classList的情况下工作。

下面的代码扩展了上面的许多答案，并通过避免添加重复的类来改进它们。

function addClass(element,className){
  var classArray = className.split(' ');
  classArray.forEach(function (className) {
    if(!hasClass(element,className)){
      element.className += " "+className;
    }
  });            
}
//this will add 5 only once
addClass(document.querySelector('#getbyid'),'3 4 5 5 5');

大多数人在getElementById上使用.classList.add，但我想在getElementByClassName上使用它。为此，我使用了如下的forEach：

document.getElementsByClassName（“类名”）.forEach（element=>element.classList.add（“new class”））；

但它不起作用，因为我发现getElementsByClassName返回的是HTML集合，而不是数组。为了处理这个问题，我使用以下代码将其转换为数组：

[…document.getElementsByClassName（“类名”）].forEach（element=>element.classList.add（“new class”））；

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