Apakah ada cara untuk menambah / menghapus beberapa kelas dalam satu instruksi tunggal dengan classList?

Sejauh ini saya harus melakukan ini:

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

Meskipun ini bisa dilakukan di jQuery, seperti ini

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

Saya ingin tahu apakah ada cara asli untuk menambah atau menghapus.

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

sama

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

Operator spread baru membuatnya lebih mudah untuk menerapkan beberapa kelas CSS sebagai array:

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

The classListproperti memastikan bahwa duplikat kelas tidak perlu ditambahkan ke elemen. Untuk menjaga fungsi ini, jika Anda tidak menyukai versi lama atau versi jQuery, saya sarankan menambahkan addManyfungsi dan removeManyke DOMTokenList(tipe 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]);
    }
}

Ini kemudian akan bisa digunakan seperti:

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

Memperbarui

Sesuai komentar Anda, jika Anda hanya ingin menulis metode khusus untuk ini jika tidak ditentukan, coba yang berikut ini:

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

Karena add()metode dari classListjust memungkinkan untuk melewati argumen terpisah dan bukan array tunggal, Anda perlu membuat faktur add()menggunakan apply. Untuk argumen pertama, Anda harus meneruskan classListreferensi dari simpul DOM yang sama dan sebagai argumen kedua array kelas yang ingin Anda tambahkan:

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

Untuk menambahkan kelas ke elemen

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

MEMPERBARUI:

Hapus kelas

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

Versi yang lebih baru dari spesifikasi DOMTokenList memungkinkan untuk beberapa argumen untuk add()dan remove(), serta argumen kedua toggle()untuk memaksa negara.

Pada saat penulisan, Chrome mendukung banyak argumen untuk add()dan remove(), tetapi tidak ada browser lain yang mendukung. IE 10 dan lebih rendah, Firefox 23 dan lebih rendah, Chrome 23 dan lebih rendah dan browser lain tidak mendukung argumen kedua toggle().

Saya menulis polyfill kecil berikut untuk menyuruh saya sampai dukungan mengembang:

(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;
        };
    }
})();

Peramban modern dengan kepatuhan ES5 dan DOMTokenListdiharapkan, tetapi saya menggunakan polyfill ini di beberapa lingkungan yang ditargetkan secara spesifik, jadi ini berfungsi dengan baik bagi saya, tetapi mungkin perlu mengutak-atik skrip yang akan berjalan di lingkungan browser lama seperti IE 8 dan lebih rendah .

Anda bisa melakukan seperti di bawah ini

Menambahkan

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

Menghapus

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

Referensi

TLDR;

Dalam kasus lurus ke depan penghapusan harus bekerja. Tetapi dalam hal penghapusan, Anda harus memastikan kelas ada sebelum Anda menghapusnya

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

Ini adalah solusi untuk pengguna IE 10 dan 11 yang tampaknya cukup mudah.

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

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

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

Atau

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

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

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

Definisi standar hanya memungkinkan untuk menambah atau menghapus satu kelas. Beberapa fungsi pembungkus kecil dapat melakukan apa yang Anda minta:

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]);
  }
}

Pembungkus ini memungkinkan Anda untuk menentukan daftar kelas sebagai argumen terpisah, sebagai string dengan spasi atau item yang dipisahkan koma, atau kombinasi. Sebagai contoh, lihat http://jsfiddle.net/jstoolsmith/eCqy7

Solusi yang sangat sederhana, tidak mewah, tetapi berfungsi yang harus saya percayai adalah browser yang sangat lintas:

Buat fungsi ini

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]); 
    }
}

Sebut saja seperti ini: removeAddClasses (node.classList, arrayToRemove, arrayToAdd);

... dimana arrayToRemove adalah larik nama kelas yang akan dihapus: ['myClass1', 'myClass2'] etcetera

... dan arrayToAdd adalah array nama kelas untuk ditambahkan: ['myClass3', 'myClass4'] dan sebagainya

Asumsikan bahwa Anda memiliki array kelas yang akan ditambahkan, Anda dapat menggunakan sintaksis penyebaran ES6:

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

Saya menyukai jawaban @ rich.kelly, tetapi saya ingin menggunakan nomenklatur yang sama dengan classList.add()(string dipisahkan koma), jadi sedikit penyimpangan.

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]);
  }
}

Jadi Anda dapat menggunakan:

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

Saya perlu menguji semua browser, tetapi ini berhasil untuk Chrome.
Haruskah kita memeriksa sesuatu yang lebih spesifik daripada keberadaan DOMTokenList.prototype.addMany? Apa sebenarnya yang menyebabkan classList.add()kegagalan di IE11?

Untuk polyfill lain element.classListada di sini . Saya menemukannya melalui MDN .

Saya menyertakan skrip itu dan menggunakannya element.classList.add("first","second","third")sesuai dengan tujuannya.