جافاسكريبت - هل هناك طريقة لإضافة/إزالة عدة أصناف في تعليمة واحدة باستخدام classList؟

حتى الآن علي أن أفعل هذا:

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

بينما يمكن تنفيذ هذا في jQuery، على هذا النحو

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

أود أن أعرف إذا كان هناك أي طريقة أصلية للإضافة أو الإزالة.

الإجابة رقم 1

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

يساوي:

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

الإجابة رقم 2

عامل الانتشار الجديد يجعل من الأسهل حتى تطبيق عدة فئات CSS كمصفوفة:

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

الإجابة رقم 3

يمكنك أن تفعل كما هو موضح أدناه

أضف

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

// OR

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

إزالة

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

// OR

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

مرجع

الإجابة رقم 4

تضمن الخاصية classList عدم إضافة الفئات المكررة إلى العنصر بشكل غير ضروري. من أجل الحفاظ على هذه الميزة، إذا كنت لا تحب النسخ الطويلة أو نسخة jQuery، أقترح إضافة دالة addMany و removeMany إلى DOMTokenList (نوع 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]);
    }
}

يمكن بعد ذلك استخدامها على النحو التالي:

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

تحديث

وفقًا لتعليقاتك، إذا كنت ترغب فقط في كتابة طريقة مخصصة لهذه في حال لم يتم تعريفها، جرب ما يلي:

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

الإجابة رقم 5

نظرًا لأن الطريقة add() من classList تسمح فقط بتمرير الوسائط بشكل منفصل وليس مصفوفة واحدة، تحتاج إلى استدعاء add() باستخدام apply. بالنسبة للوسيط الأول ستحتاج إلى تمرير مرجع classList من نفس عنصر DOM وكوسيط ثانٍ مصفوفة الفئات التي تريد إضافتها:

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

الإجابة رقم 6

إليك حلاً لمستخدمي IE 10 و 11 يبدو بسيطًا جدًا.

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

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

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

أو

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

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

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

الإجابة رقم 7

لإضافة صنف إلى عنصر

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

إزالة فصل

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