ClassList ile tek bir komutta birkaç sınıf eklemenin / kaldırmanın bir yolu var mı?

Şimdiye kadar bunu yapmak zorundayım:

elem.classList.add("first");
elem.classList.add("second");
elem.classList.add("third");

Bu jQuery'de yapılabilirken, bunun gibi

$(elem).addClass("first second third");

Eklemek veya kaldırmak için yerel bir yol olup olmadığını bilmek istiyorum.

elem.classList.add("first");
elem.classList.add("second");
elem.classList.add("third");

eşittir

elem.classList.add("first","second","third");

Yeni forma operatörü , dizi olarak birden fazla CSS sınıfının uygulanmasını daha da kolaylaştırır:

const list = ['first', 'second', 'third'];
element.classList.add(...list);

classListMülkiyet yinelenen sınıflar gereksiz yere elemana eklenen alınmamasını sağlar. Eğer longhand sürümleri veya jQuery sürümü sevmediğim eğer bu işlevselliği tutabilmek için, ben bir ekleme öneririm addManyfonksiyonu ve removeManykarşı DOMTokenList(tipine classList):

DOMTokenList.prototype.addMany = function(classes) {
    var array = classes.split(' ');
    for (var i = 0, length = array.length; i < length; i++) {
      this.add(array[i]);
    }
}

DOMTokenList.prototype.removeMany = function(classes) {
    var array = classes.split(' ');
    for (var i = 0, length = array.length; i < length; i++) {
      this.remove(array[i]);
    }
}

Bunlar daha sonra şu şekilde kullanılabilir:

elem.classList.addMany("first second third");
elem.classList.removeMany("first third");

Güncelleme

Yorumlarınıza göre, bunlar tanımlanmadıysa bunlar için yalnızca özel bir yöntem yazmak istiyorsanız, aşağıdakileri deneyin:

DOMTokenList.prototype.addMany = DOMTokenList.prototype.addMany || function(classes) {...}
DOMTokenList.prototype.removeMany = DOMTokenList.prototype.removeMany || function(classes) {...}

Yana add()gelen yöntemle classListsadece ayrı argümanlar değil, tek bir dizi geçmesine izin verir, sen invoque gerekir add()uygulamak kullanarak. İlk argüman için classList, aynı DOM düğümünden referansı ve ikinci bir argüman olarak eklemek istediğiniz sınıf dizisini iletmeniz gerekir:

element.classList.add.apply(
  element.classList,
  ['class-0', 'class-1', 'class-2']
);

Bir öğeye sınıf eklemek için

document.querySelector(elem).className+=' first second third';

GÜNCELLEME:

Sınıf kaldırma

document.querySelector(elem).className=document.querySelector(elem).className.split(class_to_be_removed).join(" ");

Yeni versiyonları DOMTokenList spec için birden argümanlar için izin add()ve remove()yanı sıra ikinci bir argüman toggle()kuvvet durumuna.

Yazma sırasında, Chrome add()ve için birden fazla bağımsız değişkeni destekler remove(), ancak diğer tarayıcıların hiçbiri desteklemez . IE 10 ve altı, Firefox 23 ve altı, Chrome 23 ve altı ve diğer tarayıcılar için ikinci argümanı desteklemez toggle().

Destek genişleyene kadar bana gelip gelmek için aşağıdaki küçük çoklu dolguyu yazdım:

(function () {
    /*global DOMTokenList */
    var dummy  = document.createElement('div'),
        dtp    = DOMTokenList.prototype,
        toggle = dtp.toggle,
        add    = dtp.add,
        rem    = dtp.remove;

    dummy.classList.add('class1', 'class2');

    // Older versions of the HTMLElement.classList spec didn't allow multiple
    // arguments, easy to test for
    if (!dummy.classList.contains('class2')) {
        dtp.add    = function () {
            Array.prototype.forEach.call(arguments, add.bind(this));
        };
        dtp.remove = function () {
            Array.prototype.forEach.call(arguments, rem.bind(this));
        };
    }

    // Older versions of the spec didn't have a forcedState argument for
    // `toggle` either, test by checking the return value after forcing
    if (!dummy.classList.toggle('class1', true)) {
        dtp.toggle = function (cls, forcedState) {
            if (forcedState === undefined)
                return toggle.call(this, cls);

            (forcedState ? add : rem).call(this, cls);
            return !!forcedState;
        };
    }
})();

ES5 uyumluluğuna sahip modern bir tarayıcı ve DOMTokenList beklenen, ancak bu özel olarak hedeflenen birkaç ortamda kullanıyorum, bu yüzden benim için harika çalışıyor, ancak IE 8 ve daha eski tarayıcı ortamlarında çalışacak komut dosyaları için ince ayar yapılması gerekebilir. .

Aşağıdaki gibi yapabilirsiniz

Ekle

elem.classList.add("first", "second", "third");

Kaldırmak

elem.classList.remove("first", "second", "third");

Referans

TLDR;

Düz ileri durumda yukarıdaki kaldırma çalışması gerekir. Ancak kaldırma durumunda, kaldırmadan önce sınıfın var olduğundan emin olmalısınız

const classes = ["first","second","third"];
classes.forEach(c => {
  if (elem.classList.contains(c)) {
     element.classList.remove(c);
  }
})

İşte IE 10 ve 11 kullanıcıları için oldukça basit görünen bir çalışma.

var elem = document.getElementById('elem');

['first','second','third'].map(item => elem.classList.add(item));

<div id="elem">Hello World!</div>

Veya

var elem = document.getElementById('elem'),
    classes = ['first','second','third'];

classes.map(function(item) {
    return elem.classList.add(item);
});

<div id="elem">Hello World!</div>

Standart tanım yalnızca tek bir sınıfın eklenmesine veya silinmesine izin verir. Birkaç küçük sarma işlevi, istediğinizi yapabilir:

function addClasses (el, classes) {
  classes = Array.prototype.slice.call (arguments, 1);
  console.log (classes);
  for (var i = classes.length; i--;) {
    classes[i] = classes[i].trim ().split (/\s*,\s*|\s+/);
    for (var j = classes[i].length; j--;)
      el.classList.add (classes[i][j]);
  }
}

function removeClasses (el, classes) {
  classes = Array.prototype.slice.call (arguments, 1);
  for (var i = classes.length; i--;) {
    classes[i] = classes[i].trim ().split (/\s*,\s*|\s+/);
    for (var j = classes[i].length; j--;)
      el.classList.remove (classes[i][j]);
  }
}

Bu sarmalayıcılar, sınıf listesini ayrı bağımsız değişkenler olarak, boşluk veya virgülle ayrılmış öğeler içeren dizeler veya bir kombinasyon olarak belirtmenize olanak tanır. Bir örnek için bkz. Http://jsfiddle.net/jstoolsmith/eCqy7

İnanmak zorunda olduğum çok basit, süslü olmayan, ancak çalışan bir çözüm çok çapraz tarayıcıdır:

Bu işlevi oluştur

function removeAddClasses(classList,removeCollection,addCollection){
    for (var i=0;i<removeCollection.length;i++){ 
        classList.remove(removeCollection[i]); 
    }
    for (var i=0;i<addCollection.length;i++){ 
        classList.add(addCollection[i]); 
    }
}

Bu şekilde çağırın: removeAddClasses (node.classList, arrayToRemove, arrayToAdd);

... Burada arrayToRemove, kaldırılacak bir sınıf adları dizisidir: ['myClass1', 'myClass2'] etcetera

... ve arrayToAdd eklenecek bir sınıf adı dizisidir: ['myClass3', 'myClass4'] etcetera

Eklenecek bir dizi sınıfınız olduğunu varsayalım, ES6 forma sözdizimini kullanabilirsiniz:

let classes = ['first', 'second', 'third']; elem.classList.add(...classes);

@ Rich.kelly'nin cevabını beğendim, ancak classList.add()(virgülle ayrılmış dizeler) ile aynı isimlendirmeyi kullanmak istedim , bu yüzden hafif bir sapma.

DOMTokenList.prototype.addMany = DOMTokenList.prototype.addMany || function() {
  for (var i = 0; i < arguments.length; i++) {
    this.add(arguments[i]);
  }
}
DOMTokenList.prototype.removeMany = DOMTokenList.prototype.removeMany || function() {
  for (var i = 0; i < arguments.length; i++) {
    this.remove(arguments[i]);
  }
}

Böylece şunları kullanabilirsiniz:

document.body.classList.addMany('class-one','class-two','class-three');

Tüm tarayıcıları test etmem gerekiyor, ancak bu Chrome için çalıştı.
Varlığından daha spesifik bir şey kontrol etmeli miyiz DOMTokenList.prototype.addMany? classList.add()IE11'de başarısız olmanın nedeni tam olarak nedir ?

İçin bir başka polyfill element.classListolduğunu burada . MDN ile buldum .

Bu komut dosyasını dahil ediyorum ve element.classList.add("first","second","third")amaçlandığı gibi kullanıyorum .