Универсальный класс для создания HTML элементов

Question

Определил Класс. Объявил в нем метод, в котором создаю элемент и добавляю ему нужные css-классы. Вопрос как сделать так, чтобы в метод или Класс передать неопределенное количество css-классов.

class Element {
    constructor(elem, className) {
      this.elem = elem
      this.className = className
    }
    createItem() {
      const element = document.createElement(this.elem)
      element.classList.add(this.className, "xxx", "yyy")
      return element
    }
   }

   const form = new Form('form', 'form-style', 'form-style2', 'form-style3', ...)
   document.body.append(form.createItem());

Нужно, чтобы в инстанс Класса передавалось неопределенное количество css-классов

Answer 1

Заменить текущий код:

constructor(elem, className) {
  this.elem = elem
  this.className = className
}

на этот:

constructor(elem, ...classNames) {
  this.elem = elem
  this.classNames = classNames
}

а в строке

element.classList.add(this.className, "xxx", "yyy")

писать

element.classList.add(...this.classNames, "xxx", "yyy")

в итоге в конструкторе будет применяться rest оператор, а в добавлении классов - spread

БЛОГ НА HUSL

Универсальный класс для создания HTML элементов

Ответы (1 шт):