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

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

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

注意 otherclass 之前的空格。包含空格很重要，否则它会损害类列表中位于它之前的现有类。

另见element.className on MDN。

---

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

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

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

element.classList.remove("otherclass");

我不希望自己添加任何空白空间和重复条目处理（使用 document.className 方法时需要这样做）。有一些 browser limitations，但您可以使用 polyfills 解决它们。

---

随心所欲地找到目标元素“d”，然后：

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

你可以用更聪明的方式包装它来检查是否存在，并检查空间要求等。

---

添加类

交叉兼容 在下面的示例中，我们将类名添加到 元素。这是 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 += '等待'; }

性能 如果您更关心交叉兼容性的性能，您可以将其缩短到以下，即快 4%。 var z = 文档.body; document.body.classList.add('wait');

方便 或者，您可以使用 jQuery，但结果性能明显变慢。根据 jsPerf $('body').addClass('wait'); 慢 94%；

删除类

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

如果没有 jQuery，它会慢 32% var a = document.body, c = 'classname'; a.className = a.className.replace( c, '' ); a.className = a.className + c;

参考

jsPerf 测试用例：添加类 jsPerf 测试用例：删除类

使用原型

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 browser 了解其他内容。

---

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

或者：

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

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

对于删除，您可以使用：

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

---

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

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

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

nameElem.classList.remove("anyclss")

---

向元素添加附加类：

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

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

要更改元素的所有类：

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

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

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

---

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

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

使用 element.classList.add() 方法 使用 className 属性

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

1. 使用 element.classList.add() 方法

var element = document.querySelector('.box'); // 使用 add 方法 // 添加单个类 element.classList.add('color'); // 添加多个类 element.classList.add('border', 'shadow'); .box { 宽度：200px;高度：100px； } .color { 背景：天蓝色； } .border { 边框：2px 纯黑色； } .shadow { 盒子阴影：5px 5px 5px 灰色； }

2. 使用 element.className 属性

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

var element = document.querySelector('.box'); // 使用 className 属性 // 添加单个类 element.className += 'color'; // 添加多个类 element.className += '边框阴影'; .box { 宽度：200px;高度：100px； } .color { 背景：天蓝色； } .border { 边框：2px 纯黑色； } .shadow { 盒子阴影：5px 5px 5px 灰色； }

---

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

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

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

---

我也认为最快的方法是在 es5:document.querySelector(".my.super-class").classList.add('new-class') 中使用 Element.prototype.classList 但在 ie8 中没有 Element.prototype.classList 这样的东西，无论如何你可以用这个片段来填充它（可以自由编辑并改进它）：

if(Element.prototype.classList === void 0){ function DOMTokenList(classes, self){ typeof classes == "string" && (classes = classes.split(' ')) while(this.length){ Array.原型.pop.apply(this); Array.prototype.push.apply(this, classes);这.__self__ = 这.__self__ || self } DOMTokenList.prototype.item = function (index){ return this[index]; } DOMTokenList.prototype.contains = function (myClass){ for(var i = this.length - 1; i >= 0 ; i--){ if(this[i] === myClass){ return true; } } return false } DOMTokenList.prototype.add = function (newClass){ if(this.contains(newClass)){ return; } this.__self__.className += (this.__self__.className?" ":"")+newClass; DOMTokenList.call(this, this.__self__.className) } DOMTokenList.prototype.remove = function (oldClass){ if(!this.contains(newClass)){ return; } this[this.indexOf(oldClass)] = undefined this.__self__.className = this.join(' ').replace(/ +/, ' ') DOMTokenList.call(this, this.__self__.className) } DOMTokenList. prototype.toggle = function (aClass){ this[this.contains(aClass)? 'remove' : 'add'](aClass) return this.contains(aClass); } DOMTokenList.prototype.replace = function (oldClass, newClass){ this.contains(oldClass) && this.remove(oldClass) && this.add(newClass) } Object.defineProperty(Element.prototype, 'classList', { get: function() { return new DOMTokenList( this.className, this ); }, enumerable: false }) }

---

以简单的方式添加、删除或检查元素类：

var uclass = {
    exists: function(elem,className){var p = new RegExp('(^| )'+className+'( |$)');return (elem.className && elem.className.match(p));},
    add: function(elem,className){if(uclass.exists(elem,className)){return true;}elem.className += ' '+className;},
    remove: function(elem,className){var c = elem.className;var p = new RegExp('(^| )'+className+'( |$)');c = c.replace(p,' ').replace(/  /g,' ');elem.className = c;}
};

var elem = document.getElementById('someElem');
//Add a class, only if not exists yet.
uclass.add(elem,'someClass');
//Remove class
uclass.remove(elem,'someClass');

---

我知道 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');

---

您可以使用类似于 jQuery 的现代方法

如果您只需要更改一个元素，即 JS 将在 DOM 中找到的第一个元素，您可以使用以下命令：

document.querySelector('.someclass').className += "red"; .red { 颜色：红色； }

请记住在类名前留一个空格。

如果您有多个要添加新类的类，则可以像这样使用它

document.querySelectorAll('.someclass').forEach(function(element) { element.className += "red"; }); .red { 颜色：红色； }