删除

最快的可靠方式（中小型）：

var clss = 'classToRemove';
elem.className = (' '+elem.className+' ').split(' ' + clss + ' ').join(' ');

如果您确定该字符串不包含多次出现的相同类名，则可以更好地使用string.replace方法（任何大小）：

var clss = 'classToRemove';
elem.className = (' '+elem.className+' ').replace(' ' + clss + ' ', ' ');

其他选择：

将RegExp与replace结合使用 - 在所有情况下都缓慢
使用indexOf查找位置，并使用字符串连接（substring）删除类（在循环中重复此操作以删除所有可能的重复项）。
最慢用于大字符串重复，在其他情况下也不会很慢。

添加（毫无疑问）：

var clss = 'classToAdd';
element.className += ' ' + clss;

Answer 2

瓶颈在于检索元素，而不是添加/删除类名。

el.className = "another_class"; //Simple

根据DOM的结构，您可以通过练习以下内容来优化元素检索：

通过getElementById
使用getElementsByTagName或childNodes获取相关子元素（取决于哪种情况更适合此情况）
如果以递归方式引用，则保存对所访问元素的引用

通常，框架将比vanilla Javacript方法更慢地检索元素，但是如果通过在本地数组中转储访问的元素来保存引用，则差异几乎可以忽略不计。

编辑： getElementsByClassName是另一种检索元素的方法，但它还没有上述方法那么受支持。

同样，如果我们能够看到您的代码，我们可以给出更直接的答案。

Answer 3

支持的地方，element.classList比Rob_W的最佳建议<强> 1000倍（没有ie8 / 9支持，尽管存在Mozilla的回退）。

http://jsperf.com/best-way-to-remove-class/6

Rob_W的测试存在缺陷，因为他们没有使用DOM--只是真正测试各种字符串替换的性能（参见测试）。

Answer 4

没有jQuery：

function addClass(domElement, class) {
    var classes = domElement.getAttribute("className");

    if (!classes.indexOf(class))
        classes += " " + class;

    domElement.setAttribute("className", classes);
}

function removeClass(domElement, class) {
    domElement.setAttribute("className", domElement.getAttribute("className").replace(class, ""));
}

使用Javascript从DOM元素添加/删除类的最有效方法是什么？

4 个答案:

删除

添加（毫无疑问）：