How to pass variables to styles in JavaScript?

Question

css

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>

If node.style.animationDurationI manually write a value, for example "250ms",
then everything will change perfectly and there will be no errors. But if you change the value using a
variable (as in my code above), it gives an error: Question: How can I fix it so that I can change the value using a variable?

Uncaught TypeError: lights is not iterable

Answer 1

querySelectorAll still returns an array, it does not need to be additionally wrapped with another array.
Without Array.from everything enumerates fine

Answer 2

node.style - a string, you need to parse it into an array and then assemble it back into a string or do a pattern replacement /([-\w]+)\s*:\s*([^;]+);?/