javascript - 仅使用 JavaScript 将 Remove Class 添加到 DOM 元素，以及这两种方式中的最佳方式

Question

使用 JavaScript 将类添加到 DOM 元素的好方法是什么？并删除。

我遇到了以下用于添加的代码:

1:

Element.prototype.addClassName = function (cls) {
    if (!this.hasClassName(cls)) {
        this.className = [this.className, cls].join(" ");
    }
};

2:

document.querySelector(element).classList.add(cls)

他们两个似乎都对我有用。它们之间有什么区别，哪个最好？

Answer 1

1。如果你被 prototype 这个词打动了，你可能想查看 MDN Docs - Inheritance and prototype chain .

2。您提到的第一个代码是将类添加到元素的正常跨浏览器方式。
它不是函数声明，而是作为 方法 添加到 Element 的原型(prototype)中 - 这样当您通过其 id 查询元素时(好的 JavaScript)，您可以简单地调用元素本身的方法。

3。您发布的第二个代码符合新 DOM 规范。 W3 Link .它只适用于那些实现 DOM Level 4 规范的浏览器。它不适用于旧浏览器。

那就不同了。

对于最好的方法，本地方法总是最好和最快的。
所以对于支持clasList的浏览器来说，第二种应该是最好的。不过，根据我的意见，在事情(草稿)尚未最终确定之前，您可能需要考虑一种可跨浏览器工作并与 JavaScript (ECMA-3) 和受支持的 DOM 规范兼容的方法。

一个简单的想法应该是更改 className，一个在所有新旧浏览器中都可以访问的属性，并将您的 class 作为字符串附加到它:

var el = document.getElementById(id);
el.className = el.className + " " + cls; 
// mind the space while concatening

当然，您可以添加验证方法，例如使用 regex 在添加和删除时 trim 空格。

顺便说一句，我得到了您作为第一个示例发布的代码的完整部分:

Element.prototype.hasClassName = function(name) {
    return new RegExp("(?:^|\\s+)" + name + "(?:\\s+|$)").test(this.className);
};

Element.prototype.addClassName = function(name) {
    if (!this.hasClassName(name)) {
        this.className = this.className ? [this.className, name].join(' ') : name;
    }
};

Element.prototype.removeClassName = function(name) {
    if (this.hasClassName(name)) {
        var c = this.className;
        this.className = c.replace(new RegExp("(?:^|\\s+)" + name + "(?:\\s+|$)", "g"), "");
    }
};