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 即可。如果您被原型这个词所感动，您可能需要检查MDN Docs - Inheritance and prototype chain。

<强> 2 即可。您提到的第一个代码是向元素添加类的常规跨浏览器方式它不是一个函数声明，而是作为方法添加到元素的原型 - 所以当你通过它的id查询一个元素时（好的ol） '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修剪空格。

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

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

Answer 2

这是jquery的代码。

jQuery's addClass 的改编版本
jQuery's removeClass

如果你看一下jQuery源代码，他们就是这样做的。这是从它们改编而来，但几乎完全是由jQuery编写的，并且是它们的代码。我不是原作者，而只是展示如何使用一件作品而不是整个图书馆。

jQuery的addClass：

//This code is jQuery's
function AddClassToElement(elem,value){
 var rspaces = /\s+/;
 var classNames = (value || "").split( rspaces );
 var className = " " + elem.className + " ",
 setClass = elem.className;
 for ( var c = 0, cl = classNames.length; c < cl; c++ ) {
  if ( className.indexOf( " " + classNames[c] + " " ) < 0 ) {
   setClass += " " + classNames[c];
  }
 }
 elem.className = setClass.replace(/^\s+|\s+$/g,'');//trim
}

jQuery的removeClass：

//This code is jQuery's
function RemoveClassFromElement(elem,value){
 var rspaces = /\s+/;
 var rclass = /[\n\t]/g
 var classNames = (value || "").split( rspaces );
 var className = (" " + elem.className + " ").replace(rclass, " ");
 for ( var c = 0, cl = classNames.length; c < cl; c++ ) {
  className = className.replace(" " + classNames[c] + " ", " ");
 }
 elem.className = className.replace(/^\s+|\s+$/g,'');//trim
}

这是一个工作小提琴：http://jsfiddle.net/C5dvL/

仅使用JavaScript将删除类添加到DOM元素，以及这两种方法中的最佳方法

2 个答案:

这是jquery的代码。