Как в стили в JavaScript передавать переменные?

Question

[Wadnory]

let lights = Array.from(document.querySelectorAll('.light'))
    let speedValue = 250
    for (let node of lights) {
      node.style.animationDuration = `${speedValue}ms`
    }

<div className='lights'>
      <div className='light'></div>
      <div className='light'></div>
      <div className='light'></div>
      <div className='light'></div>
      <div className='light'></div>
      <div className='light'></div>
      <div className='light'></div>
    </div>

Если в node.style.animationDuration напишу вручную значение, к примеру "250ms",
то все прекрасно поменяется и никаких ошибок не будет. Но если менять значение с помощью
переменной (как в моем коде выше), то выдаёт ошибку:

Uncaught TypeError: lights is not iterable

Вопрос: Как исправить, чтобы можно было менять значение с помощью переменной?

Comments

[Aetae]

С приведённом кодом данная ошибка невозможна. Ты где-то привираешь.

Answer 1

[I Phoenix I]

querySelectorAll все равно возвращает массив, его не нужно дополнительно оборачивать еще одним массивом.
Без Array.from все прекрасно перечисляется

Answer 2

[Антон Шаманов]

node.style - строка, вам нужно распарсить её в массив /([-\w]+)\s*:\s*([^;]+);?/ и потом собрать в обратно в строку или сделать замену по шаблону