有一种方法来添加/删除多个类与一个单一的指令与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函数,并将其removeManyDOMTokenListDOMTokenList的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) {...} 

由于classListadd()方法只允许传递单独的参数而不是单个数组,所以需要使用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);