const box = document.getElementsByClassName('box'); let colorAsString = '#FEC6F0'; let colorAsNumber = #FEC6F0; Array.from(box).forEach((element) =>{ element.style.backgroundColor = colorAsString; element.style.backgroundColor = colorAsNumber; });Guardé un valor de color hexadecimal en una cadena, así como un número y pasé la variable como un valor para la propiedad css. ¿Por qué este código no funciona me puede explicar ...!
Cuando edita la propiedad de estilo, al final es solo una cadena CSS. Así que para representar colores puedes usar formatos como: '#ffffff' o 'rgb(255,255,255)'. Pero no puedes usar un número.
Puede leer más sobre eso aquí: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
const box = document.getElementsByClassName('box'); let colorAsString = '#FEC6F0'; Array.from(box).forEach((element) =>{ element.style.backgroundColor = colorAsString; }); .box { width:100px; height:100px; margin:10px; background-color:gray; } <div class="box"></div> <div class="box"></div> <div class="box"></div>Esta funcionando
<html> <body> <p id="p"> on click change my color </p> <script> onclick = function(){ document.getElementById("p").style.color = "#fff"; document.getElementById("p").style.background = "#000"; } </script> </body> </html>