仅使用JavaScript将删除类添加到DOM元素，以及这两种方法中的最佳方法 [英] Add Remove Class to a DOM element using only JavaScript, and best of these 2 ways

问题描述

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

What is a good approach to add class to a DOM element using JavaScript. And Remove also.

我发现以下代码添加：

1：

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

2：

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

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

Both of them seem to work for me. What is the difference between them and which is the best?

推荐答案

1 。如果您被原型这个词所感动，您可能需要检查 MDN文档 - 继承和原型链。

1. If you are moved by the word prototype, you might want to check MDN Docs - Inheritance and prototype chain.

2 。您提到的第一个代码是向元素添加类的常规跨浏览器方式。

而不是函数声明，它作为方法添加到元素的原型 - 这样当你通过 id （好的'JavaScript）查询一个元素时，你可以简单地调用元素本身的方法。

2. The first code you mentioned is a normal cross-browser way of adding a class to an element.
Instead of being a function declaration, its added as a method to the Element's prototype - so that when you query an Element by its id (good ol' JavaScript), you can simply call the method on the element itself.

3 。您发布的第二个代码是新DOM规范。 W3链接 。
它仅适用于那些实现DOM Level 4规范的浏览器。它不适用于旧版浏览器。

3. The second code you have posted is per the new DOM Specification. W3 Link. It will work only in those browsers that implement the DOM Level 4 Specs. It won't work in old browsers.

这就差别了。

对于最好的方法，本机方法始终是最好和最快的。

因此对于支持的浏览器 clasList ，第二个应该是最好的。根据我的观点，在事情（草稿）未最终确定之前，您可能需要考虑一种跨浏览器工作的方法，并且兼容JavaScript（ECMA-3）和支持的DOM规范。

For the best method, a native method is always the best and fastest.
So for the browsers that support clasList, the second should be the best. Per my opinion though, till things (drafts) are not finalized you might want to consider a method that works cross-browser and is compatible with both JavaScript (ECMA-3) and supported DOM Spec.

一个简单的想法应该是更改 className ，这是一个可在所有新旧浏览器中访问的属性，并附加类作为字符串：

A simple idea should be to change the className, a property accessible in all new and old browsers, and append your class as a string to it:

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

当然你可以添加验证方法，比如使用正则表达式用于在添加和删除时修剪空格。

Of course you can add validation methods like using regex for trimming spaces while adding and removing.

顺便说一下，我得到了你发布的第一个例子的全部代码：

By the way, I got the full part of the code you posted as the 1st Example:

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"), "");
    }
};

这篇关于仅使用JavaScript将删除类添加到DOM元素，以及这两种方法中的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！