有一种方法来添加/删除多个类与一个单一的指令与classList？
到目前为止，我必须这样做：
elem.classList.add("first"); elem.classList.add("second"); elem.classList.add("third"); 虽然这在jQuery中是可行的，像这样
$(elem).addClass("first second third");
我想知道是否有任何本地的方式来添加或删除。
elem.classList.add("first"); elem.classList.add("second"); elem.classList.add("third");
是平等的
elem.classList.add("first","second","third");
新的扩展运算符使得更容易将多个CSS类作为数组应用：
const list = ['first', 'second', 'third']; element.classList.add(...list);
classList属性确保重复的类不会不必要地添加到元素中。 为了保持这个function，如果你不喜欢longhand版本或jQuery版本，我会build议添加一个addMany函数，并将其removeMany到DOMTokenList （ DOMTokenList的types）：
DOMTokenList.prototype.addMany = function(classes) { var array = classes.split(' '); for (var i = 0, length = array.length; i < length; i++) { this.add(array[i]); } } DOMTokenList.prototype.removeMany = function(classes) { var array = classes.split(' '); for (var i = 0, length = array.length; i < length; i++) { this.remove(array[i]); } }
这些可以这样使用：
elem.classList.addMany("first second third"); elem.classList.removeMany("first third");
更新
根据您的意见，如果您希望仅在这些事件尚未定义的情况下为其编写自定义方法，请尝试以下操作：
DOMTokenList.prototype.addMany = DOMTokenList.prototype.addMany || function(classes) {...} DOMTokenList.prototype.removeMany = DOMTokenList.prototype.removeMany || function(classes) {...}
由于classList的add()方法只允许传递单独的参数而不是单个数组，所以需要使用apply来invoque add() 。 对于第一个参数，您将需要从同一个DOM节点传递classList引用，并将第二个参数作为要添加的类的数组：
element.classList.add.apply( element.classList, ['class-0', 'class-1', 'class-2'] );
较新版本的DOMTokenList规范允许多个参数add()和remove() ，以及toggle()强制状态的第二个参数。
在撰写本文时，Chrome支持多个参数来add()和remove() ，但是其他浏览器都没有。 IE 10及更低版本，Firefox 23及更低版本，Chrome 23及更低版本及其他浏览器不支持toggle()的第二个参数。
我写了下面的小填充来支持我，直到支持扩展：
(function () { /*global DOMTokenList */ var dummy = document.createElement('div'), dtp = DOMTokenList.prototype, toggle = dtp.toggle, add = dtp.add, rem = dtp.remove; dummy.classList.add('class1', 'class2'); // Older versions of the HTMLElement.classList spec didn't allow multiple // arguments, easy to test for if (!dummy.classList.contains('class2')) { dtp.add = function () { Array.prototype.forEach.call(arguments, add.bind(this)); }; dtp.remove = function () { Array.prototype.forEach.call(arguments, rem.bind(this)); }; } // Older versions of the spec didn't have a forcedState argument for // `toggle` either, test by checking the return value after forcing if (!dummy.classList.toggle('class1', true)) { dtp.toggle = function (cls, forcedState) { if (forcedState === undefined) return toggle.call(this, cls); (forcedState ? add : rem).call(this, cls); return !!forcedState; }; } })();
一个符合ES5和DOMTokenList现代浏览器是可以使用的，但是我在几个特定的目标环境中使用了这个DOMTokenList ，所以它对我来说很好，但是它可能需要调整那些可以在传统浏览器环境中运行的脚本，比如IE 8和降低。
将类添加到元素
document.querySelector(elem).className+=' first second third';
更新：
删除课程
document.querySelector(elem).className=document.querySelector(elem).className.split(class_to_be_removed).join(" ");
标准的定义只允许添加或删除一个类。 一些小的包装函数可以做你所要求的：
function addClasses (el, classes) { classes = Array.prototype.slice.call (arguments, 1); console.log (classes); for (var i = classes.length; i--;) { classes[i] = classes[i].trim ().split (/\s*,\s*|\s+/); for (var j = classes[i].length; j--;) el.classList.add (classes[i][j]); } } function removeClasses (el, classes) { classes = Array.prototype.slice.call (arguments, 1); for (var i = classes.length; i--;) { classes[i] = classes[i].trim ().split (/\s*,\s*|\s+/); for (var j = classes[i].length; j--;) el.classList.remove (classes[i][j]); } }
这些包装允许您指定类的列表作为单独的参数，以空格或逗号分隔的项目或组合的string。 有关示例，请参阅http://jsfiddle.net/jstoolsmith/eCqy7
这是一个IE 10和11用户的工作，看起来非常简单。
var elem = document.getElementById('elem'); ['first','second','third'].map(item => elem.classList.add(item));
<div id="elem">Hello World!</div>
我喜欢@ rich.kelly的答案，但我想使用与classList.add() （逗号分隔string）相同的命名法，所以略有偏差。
DOMTokenList.prototype.addMany = DOMTokenList.prototype.addMany || function() { for (var i = 0; i < arguments.length; i++) { this.add(arguments[i]); } } DOMTokenList.prototype.removeMany = DOMTokenList.prototype.removeMany || function() { for (var i = 0; i < arguments.length; i++) { this.remove(arguments[i]); } }
所以你可以使用：
document.body.classList.addMany('class-one','class-two','class-three');
我需要testing所有的浏览器，但是这对Chrome来说很有效。
我们应该检查一些比DOMTokenList.prototype.addMany更具体的DOMTokenList.prototype.addMany吗？ 究竟是什么导致classList.add()在IE11中失败？
element.classList另一个polyfill在这里 。 我通过MDNfind了它。
我包含该脚本，并使用element.classList.add("first","second","third") 。
假设您有一个要添加的类的数组，您可以使用ES6扩展语法：
let classes = ['first', 'second', 'third']; elem.classList.add(...classes);
