¿Cómo edito una variable CSS usando JS?

Tengo estas variables CSS para controlar los colores de mi proyecto y poder crear temas.

html {
    --main-background-image: url(../images/starsBackground.jpg);
    --main-text-color: #4CAF50;
    --main-background-color: rgba(0,0,0,.25);
    --beta-background-color: rgba(0,0,0,.85);
}

Sin embargo, no importa cómo intente cambiar el atributo (las dos líneas comentadas se intentaron por separado), lo más cerca que estoy es que no devuelve un atributo válido.

function loadTheme() {
    var htmlTag = document.getElementsByTagName("html");
    var yourSelect = document.getElementById( "themeSelect" );
    var selectedTheme = ( yourSelect.options[ yourSelect.selectedIndex ].value );
    // htmlTag[0].setAttribute('--main-text-color', '#FFCF40');
    // $("html").css("--main-text-color","#FFCF40");
}

el mensaje de error

Dec 29 '16 05:12 David Richards

Resulta que es posible cambiar las variables CSS utilizando la el.style.cssTextpropiedad o el.style.setPropertylos el.setAttributemétodos. En su código, los fragmentos el.setAttributese utilizan incorrectamente, lo que está provocando el error que encontró. Esta es la forma correcta:

document.documentElement.style.cssText = "--main-background-color: red";

o

document.documentElement.style.setProperty("--main-background-color", "green");

o

document.documentElement.setAttribute("style", "--main-background-color: green");

Manifestación

La siguiente demostración define un color de fondo usando una variable CSS y luego lo cambia usando el fragmento JS 2 segundos después de la carga.

window.onload = function() {
  setTimeout(function() {
    document.documentElement.style.cssText = "--main-background-color: red";
  }, 2000);
};

html {
    --main-background-image: url(../images/starsBackground.jpg);
    --main-text-color: #4CAF50;
    --main-background-color: rgba(0,0,0,.25);
    --beta-background-color: rgba(0,0,0,.85);
}

body {
  background-color: var(--main-background-color);
}

Expandir fragmento

Obviamente, esto solo funcionará en navegadores que admitan variables CSS.

Dec 28 '2016 23:12 Brett DeWoody

Si estás usando :root:

:root {
    --somevar: black;
}

Será documentElement.

document.documentElement.style.setProperty('--somevar', 'green');

Nov 08 '2017 06:11 phil294