Accéder à la variable CSS à partir de javascript

Question

Existe-t-il un moyen d'accéder à une variable CSS à partir de javascript? Voici ma déclaration de variable css.

:root{
    --color-font-general:#336699;
}

Answer 1

Juste la manière standard:

1. Obtenez les styles calculés avec getComputedStyle
2. Utilisez getPropertyValue pour obtenir la valeur de la propriété souhaitée

getComputedStyle(element).getPropertyValue('--color-font-general');

Exemple:

var style = getComputedStyle(document.body);
console.log(style.getPropertyValue('--color-font-general'));

:root { --color-font-general: #336699; }

Answer 2

Utilisez ceci:

window.getComputedStyle(document.documentElement).getPropertyValue('--color-font-general');

Et vous pouvez le changer comme ça:

document.documentElement.style.setProperty('--color-font-general', '#000');

source