10

使用 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)

他们两个似乎都为我工作。它们之间有什么区别，哪个是最好的？

4

2 回答 2

22

1 . 如果你被原型这个词打动，你可能想查看MDN Docs-Inheritance 和原型链。

2 . 您提到的第一个代码是向元素添加类的正常跨浏览器方式。
它不是一个函数声明，而是作为一个方法添加到Element的原型中——这样当你通过它的id（好的 ol' JavaScript ）查询一个 Element 时，你可以简单地在元素本身上调用该方法。

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

这就是区别。

对于最佳方法，本机方法始终是最好和最快的。
所以对于支持的浏览器，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"), "");
    }
};
于 2012-12-31T18:53:50.013 回答
8

这是jquery的代码。

jQuery 的 addClass
和jQuery 的 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/

于 2012-12-31T18:41:34.953 回答