Answers:
使用element.classList.add添加一个类：
element.classList.add("my-class");然后element.classList.remove删除一个类：
element.classList.remove("my-class");className在元素的属性中添加一个空格以及新类的名称。首先，id在元素上放置一个，以便您可以轻松获取参考。
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>然后
var d = document.getElementById("div1");
d.className += " otherclass";注意前面的空格otherclass。重要的是要包含空格，否则会损害类列表中之前的现有类。
在没有任何框架的情况下最简单的方法是使用element.classList.add方法。
var element = document.getElementById("div1");
element.classList.add("otherclass");编辑： 并且，如果您想从元素中删除类-
element.classList.remove("otherclass");我宁愿不必自己添加任何空白空间和重复条目（使用此document.className方法时需要）。浏览器有一些限制，但是您可以使用polyfill来解决它们。
根据需要找到目标元素“ d”，然后：
d.className += ' additionalClass'; //note the space您可以用更聪明的方法包装它，以检查是否存在，并检查空间需求等。
split即在空格上删除类名，请从结果数组中删除不需要的类名，然后join再次删除该数组...或使用element.classList.remove。
交叉兼容
在以下示例中，我们classname向<body>元素添加一个。这是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 += ' wait';
}性能
如果您更关心交叉兼容性方面的性能，则可以将其缩短为以下速度，即快4％。
var z = document.body;
document.body.classList.add('wait');方便
或者，您可以使用jQuery，但结果性能会大大降低。根据jsPerf慢94％
$('body').addClass('wait');性能
如果您关注性能，则选择性地使用jQuery是删除类的最佳方法
var a = document.body, c = ' classname';
$(a).removeClass(c);如果没有jQuery，它的速度要慢32％
var a = document.body, c = ' classname';
a.className = a.className.replace( c, '' );
a.className = a.className + c;Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")a.classList ? ...）与普通版本（）有速度差异if (a.classList) { ....吗？
classList.remove()。你为什么不使用它？它比jQuery jsperf.com/remove-class-vanilla-vs-jquery快得多
classList除了删除类，他都用过所有东西，这就是为什么我要这样。
使用纯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;
}if( cn.indexOf( classname ) != -1 ) { return; } 请注意，如果您已经在其中添加了“ btn”类和“ btn-info”类，则此操作将失败。
element.className.split(" ");来防止在此处报告@AlexandreDieulot问题。
假设您要做的不仅仅是添加一个类（例如，您还有异步请求等等），我建议您使用Prototype或jQuery之类的库。
这将使您几乎需要做的一切（包括此操作）变得非常简单。
假设您的页面上现在有jQuery，您可以使用如下代码向元素添加类名（在这种情况下为加载）：
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );查看jQuery API浏览器以了解其他内容。
您可以使用classList.add或classList.remove方法从元素中添加/删除类。
var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")上面的代码将为nameElem添加（而不是替换）一个类“ anyclass”。同样，您可以使用classList.remove（）方法删除一个类。
nameElem.classList.remove("anyclss")我知道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');我也认为最快的方法是像在es5中一样使用Element.prototype.classList：document.querySelector(".my.super-class").classList.add('new-class')
但是在ie8中，没有Element.prototype.classList这样的东西，无论如何，您都可以使用此代码片段对其进行填充（随意编辑和改进它） ）：
if(Element.prototype.classList === void 0){
function DOMTokenList(classes, self){
typeof classes == "string" && (classes = classes.split(' '))
while(this.length){
Array.prototype.pop.apply(this);
}
Array.prototype.push.apply(this, classes);
this.__self__ = this.__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');您可以使用类似于jQuery的现代方法
如果只需要更改一个元素（JS将在DOM中找到的第一个元素），则可以使用以下元素：
document.querySelector('.someclass').className += " red";.red {
color: red;
}<div class="someclass">
<p>This method will add class "red" only to first element in DOM</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>请记住，在班级名称前留一个空格。
如果您有多个班级要在其中添加新班级，则可以像这样使用它
document.querySelectorAll('.someclass').forEach(function(element) {
element.className += " red";
});.red {
color: red;
}<div class="someclass">
<p>This method will add class "red" to all elements in DOM that have "someclass" class.</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>我认为最好使用纯JavaScript，我们可以在浏览器的DOM上运行它。
这是使用它的功能方法。我曾经使用过ES6，但可以随意使用ES5和函数表达式或函数定义，以适合您的JavaScript StyleGuide。
'use strict'
const oldAdd = (element, className) => {
let classes = element.className.split(' ')
if (classes.indexOf(className) < 0) {
classes.push(className)
}
element.className = classes.join(' ')
}
const oldRemove = (element, className) => {
let classes = element.className.split(' ')
const idx = classes.indexOf(className)
if (idx > -1) {
classes.splice(idx, 1)
}
element.className = classes.join(' ')
}
const addClass = (element, className) => {
if (element.classList) {
element.classList.add(className)
} else {
oldAdd(element, className)
}
}
const removeClass = (element, className) => {
if (element.classList) {
element.classList.remove(className)
} else {
oldRemove(element, className)
}
}带有纯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";
})对于使用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()首先，给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>您可以使用API querySelector选择您的元素，然后使用该元素和新的类名作为参数创建一个函数。对于现代浏览器使用classlist，对于IE8使用classlist。然后，您可以在事件发生后调用该函数。
//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');这个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希望这对身体有益
element.classList.add("my-class")改为使用。