Estoy tratando de crear un objeto con los estilos que necesito y luego establecerlos en mi elemento simplemente desestructurando y combinando los objetos, pero por alguna razón no funciona:
const styles = { color: "#FFFFFF" } const element = document.querySelector(".someElementSelector"); element.style = { ...element.style, ...styles };Sin embargo, los estilos simplemente se configuran en cadenas vacías, lo sé porque si lo hago:
const styles = { color: "#FFFFFF" } const element = document.querySelector(".someElementSelector"); element.style.color = "#FFFFFF"; element.style = { ...element.style, ...styles }; color es una cadena vacía "", pero si elimino la última línea con la desestructuración por completo, el color se establece correctamente.
HTMLElement.style es un objeto de solo lectura . Si asigna una cadena, automáticamente se asigna a su propiedad cssText .
Puedes desestructurar usando Object.entries(styles) :
const styles = { color: "red", fontSize: "30px", textDecoration: "underline", transform: "rotate(45deg)", transformOrigin: "top left" } for (const [prop, value] of Object.entries(styles)) { el.style[prop] = value; } <div id="el">ABC</div> También puede usar Object.assign() (que básicamente es un acceso directo al primer ejemplo):
const styles = { color: "red", fontSize: "30px", textDecoration: "underline", transform: "rotate(45deg)", transformOrigin: "top left" } Object.assign(el.style, styles); <div id="el">ABC</div>