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。プロトタイプという言葉に感動した場合は、MDNDocs-継承とプロトタイプチェーンを確認することをお勧めします。

2。あなたが言及した最初のコードは、要素にクラスを追加する通常のクロスブラウザーの方法です。
関数宣言ではなく、要素のプロトタイプにメソッドとして追加されます。そのため、 （古き良きJavaScript）で要素をクエリするときに、要素自体でメソッドを呼び出すことができます。 id

3。投稿した2番目のコードは、新しいDOM仕様によるものです。W3リンク。これは、DOMレベル4仕様を実装しているブラウザーでのみ機能します。古いブラウザでは動作しません。

それが違いになります。

最良の方法については、ネイティブメソッドが常に最良かつ最速です。
したがって、をサポートするブラウザclasListの場合、2番目が最適です。私の意見では、物事（ドラフト）が完成しなくなるまで、クロスブラウザーで動作し、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によって記述されており、それらのコードです。私は原作者ではなく、ライブラリ全体ではなく、1つの作品をどのように使用できるかを示しているにすぎません。

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 に答える