javascript 清除 element.classList
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15040297/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clear element.classList
提问by warvariuc
element.classListis of DOMTokenListtype.
element.classList是DOMTokenList类型。
Is there a method to clear this list?
有没有办法清除这个列表？
回答by nnnnnn
I'm not aware of a "method" in the sense of a "function" associated with classList. It has .add()and .remove()methods to add or remove individual classes, but you can clear the list in the sense of removing all classes from the element like this:
我不知道与classList. 它具有.add()和.remove()方法来添加或删除单个的类，但你可以从这样的元素删除所有类别的感觉清除列表：
element.className = "";
回答by pekaaw
With ES6 and the spread operator, this is a breeze.
使用 ES6 和扩展运算符，这变得轻而易举。
element.classList.remove(...element.classList);
This will spread the list items as arguments to the remove method.
Since the classList.remove method can take many arguments, they all are removed and the classList is cleared.
这会将列表项作为参数传播给 remove 方法。
由于 classList.remove 方法可以接受许多参数，因此它们都被删除并清除 classList。
Even though it is readable it is not very efficient. @Fredrik Macrobond's answeris faster.
View different solutions and their test results at jsperf.
即使它是可读的，它也不是很有效。@Fredrik Macrobond 的回答更快。
在jsperf查看不同的解决方案及其测试结果。
回答by Fredrik_Macrobond
var classList = element.classList;
while (classList.length > 0) {
classList.remove(classList.item(0));
}
回答by Lucio Paiva
Here's another way to do it:
这是另一种方法：
element.setAttribute("class", "")
回答by Michael - Plaudit Design
I recommend not using classNameas classListcould result in faster DOM updates.
我建议不要使用classNameasclassList可能会导致更快的 DOM 更新。
The remove()method of DOMTokenList(which is what classListis) can take multiple arguments - each a string of a classname to remove (reference). First you need to convert the classListto a plan array of classnames. Some people use Array.prototype.slice()to do that, but I'm not a fan and I thinka for loop is faster in most browsers - but either way I have nothing against for loops and the slice often feels like a hack to me. Once you have the array you simply use apply()to pass that array as a list of arguments.
所述remove()的方法DOMTokenList（这是什么classList是）可以采用多个参数-每一个类名的字符串，以除去（参考）。首先，您需要将 转换classList为类名的计划数组。有些人过去常常这样Array.prototype.slice()做，但我不是粉丝，我认为for 循环在大多数浏览器中更快 - 但无论哪种方式，我都不反对 for 循环，而且切片对我来说通常感觉像是一种黑客攻击。拥有数组后，您只需使用apply()该数组作为参数列表传递即可。
I use a utility class I wrote to accomplish this. The first method is the one you are looking for, but I'm including slightly more for your reference.
我使用我编写的实用程序类来完成此操作。第一种方法是您正在寻找的方法，但我提供了更多内容供您参考。
ElementTools.clearClassList = function(elem) {
var classList = elem.classList;
var classListAsArray = new Array(classList.length);
for (var i = 0, len = classList.length; i < len; i++) {
classListAsArray[i] = classList[i];
}
ElementTools.removeClassList(elem, classListAsArray);
}
ElementTools.removeClassList = function(elem, classArray) {
var classList = elem.classList;
classList.remove.apply(classList, classArray);
};
ElementTools.addClassList = function(elem, newClassArray) {
var classList = elem.classList;
classList.add.apply(classList, newClassArray);
};
ElementTools.setClassList = function(elem, newClassArray) {
ElementTools.clearClassList(elem);
ElementTools.addClassList(elem, newClassArray);
};
Please note that I have not thoroughly tested this in all browsers as the project I am working on only needs to work in a very limited set of modern browsers. But it shouldwork back to IE10, and if you include a shim (https://github.com/eligrey/classList.js) for classList, it shouldwork back to IE7 (and also with SVGs since Eli Grey's shim adds support for SVG in unsupported browsers too).
请注意，我尚未在所有浏览器中对此进行彻底测试，因为我正在处理的项目只需要在非常有限的一组现代浏览器中工作。但它应该可以返回到 IE10，如果你为 classList包含一个垫片（https://github.com/eligrey/classList.js），它应该可以返回到 IE7（也可以使用SVG，因为 Eli Grey 的垫片添加了对SVG 在不受支持的浏览器中也是如此）。
An alternative approach I considered was to loop backwards through the classListand call remove()on classList for each entry. (Backwards because the length changes as you remove each.) While this should also work, I figured using the multiple arguments on remove()could be faster since modern browsers may optimize for it and avoid multiple updates to the DOM each time I call remove() in a for loop. Additionally both approaches require a for loop (either to build a list or to remove each) so I saw no benefits to this alternative approach. But again, I did notdo any speed tests.
我考虑的另一种方法是向后循环遍历classList并remove()为每个条目调用classList。（倒退，因为当你删除每个时长度会改变。）虽然这也应该有效，但我认为使用多个参数remove()可能会更快，因为现代浏览器可能会优化它并避免每次我调用 remove() 时对 DOM 的多次更新for 循环。此外，这两种方法都需要 for 循环（构建列表或删除每个），所以我认为这种替代方法没有任何好处。但同样，我也不会做任何速度测试。
If somebody tests speeds of the various approaches or has a better solution, please post.
如果有人测试了各种方法的速度或有更好的解决方案，请发布。
EDIT: I found a bug in the shim which stops it from correctly adding support to IE11/10 for multiple arguments to add()and remove(). I have filed a reporton github.
编辑：我在 shim 中发现了一个错误，该错误阻止它正确添加对 IE11/10 的支持，以支持add()和 的多个参数remove()。我已经在github上提交了一份报告。
回答by Владимир Казак
Another option is to simply remove the class attribute:
另一种选择是简单地删除类属性：
elem.removeAttribute('class')
