เพิ่ม/ลบหลาย Class พร้อมกันด้วย classList ใน HTML และ JavaScript

classList และเมธอด add/remove

classList คืนค่า DOMTokenList สามารถใช้ add() และ remove() ได้ แต่รับพารามิเตอร์เดียวต่อครั้ง

ขยาย DOMTokenList ให้รองรับหลายคลาส

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

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

การใช้งาน

element.classList.addMany('class1 class2 class3');
element.classList.removeMany('class1 class2');

โค้ดนี้เพิ่มความสะดวกเหมือน jQuery addClass/removeClass ที่รับหลายคลาสพร้อมกัน