Có cách nào để thêm / bớt một số lớp trong một hướng dẫn duy nhất với classList trong HTML và JavaScript không?

Thuộc tính classList trả về (các) tên lớp của một phần tử, dưới dạng một đối tượng DOMTokenList. Thuộc tính classList là chỉ đọc, tuy nhiên, bạn có thể sửa đổi nó bằng cách sử dụng các phương thức add () và remove ().

classListproperty đảm bảo rằng các lớp trùng lặp không được thêm vào phần tử một cách không cần thiết. Để giữ chức năng này, nếu bạn không thích các phiên bản dài tay hoặc phiên bản jQuery, tôi khuyên bạn nên thêm addMany chức năng và removeMany tới DOMTokenList

Những thứ này sau đó sẽ có thể sử dụng được như vậy -

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