Pourquoi mes modifications JavaScript n'affectent-elles pas mes variables CSS :root ?

Modification des variables de couleur CSS :root avec JavaScript

Un utilisateur vise à implémenter un système qui modifie le thème d'une page Web en ajustant les variables de couleur défini dans la section :root de CSS. Malgré l'implémentation d'un code JavaScript pour définir le thème, aucun changement n'est observé.

Le code fourni tente de modifier la variable --main-color, mais il n'utilise pas la syntaxe correcte. La bonne façon de modifier les variables :root en JavaScript consiste à utiliser la méthode document.documentElement.style.setProperty(). La ligne suivante doit être ajoutée au code JavaScript :

document.documentElement.style.setProperty('--main-color', '#YOURCOLOR');

Où #YOURCOLOR représente la valeur de couleur souhaitée. Par exemple, pour définir la couleur principale sur le bleu, il faudra utiliser la ligne suivante :

document.documentElement.style.setProperty('--main-color', '#0000FF');

En incorporant cette ligne dans le code JavaScript, l'utilisateur pourra modifier dynamiquement les variables de couleur :root, leur permettant de personnaliser le thème de leur page Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!