Estoy usando :root para crear algunas variables CSS. ¿Es posible crearlos con JavaScript en lugar de CSS? A continuación se muestra un ejemplo sencillo:
<div id="container"></div> :root { --first-color: #000; --second-color: #666666; } #container { background-color: var(--second-color); width: 90px; height: 90px; }Sí, puede hacerlo a través del método .setProperty() :
const root = document.documentElement; root.style.setProperty('--first-color', 'red'); root.style.setProperty('--second-color', 'blue'); p { color: var(--first-color); } div { color: var(--second-color); } <p>First color</p> <div>Second color</div>