Можно ли передать переменную в querySelectorAll() и classList.add()?

Question

Допустим, есть переменная, в которую записывается имя класса: let class1 = 'lalala'

Есть ли какой-то способ присвоить новый класс элементу, используя переменную class1?

Пришло в голову сделать так: elem.classList.add(class1), однако это не сработало. Аналогичная ситуация с querySelectorAll. Если передать переменную class1ForQuery = '.lalala' в querySelectorAll, то результат также никакой.

Answer 1

Ваш ход мыслей абсолютно правильный, для этого можно воспользоваться методом classList, в примере ниже видно что все присвоения/изменения работают корректно.

const element = document.querySelector("#root")
let class1 = "lalala"
element.classList.add(class1)
console.log(element.classList) // lalala

class1 = "land"
element.classList.add(class1)
console.log(element.classList) // lalala land

Другое дело если вы хотите что бы классы присваивались элементу автоматически, сразу после того как вы изменили переменную, тогда Вам следует реализовать что то что будет отслеживать изменение переменной class1 и вызывать метод classList.

Answer 2

Свойство classList возвращает живую коллекцию. То есть, значение этого свойства указывает на объект, который автоматически обновляется при изменении набора классов элемента.

const elem = document.querySelector('.test')
      elemClassList = elem.classList;

document.addEventListener('click', ({ target }) => {
  if (target.matches('button.add')) {
    const newClass = Array.from({ length: 5 },
      () => String.fromCharCode(Math.floor(Math.random() * 26) + 97)
    ).join('');
    elemClassList.add(newClass);
    console.log(`Добавлен класс "${newClass}":\n${elem.outerHTML}`);
  } else if (target.matches('button.find')) {
    const selector = ['', ...elemClassList.values()].join('.'),
          searchResult = document.querySelector(selector);
    console.log(`Выбор из документа по селектору "${selector}":\n${searchResult && searchResult.outerHTML}`);
  }
});

<button class="add">Добавить элементу случайный класс</button>
<button class="find">Найти элемент по селектору всех его классов</button>
<p class="test"></p>

БЛОГ НА HUSL

Можно ли передать переменную в querySelectorAll() и classList.add()?

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