Comment modifier correctement les variables CSS à l'aide de JavaScript ?

Comment modifier des variables CSS avec JavaScript à l'aide de Style.setProperty

En CSS, les variables vous permettent de définir des thèmes de couleurs et d'autres paramètres une fois et utilisez-les tout au long de votre projet. Pour modifier ces variables de manière dynamique avec JavaScript, vous devez utiliser les méthodes appropriées.

Méthode incorrecte :

Dans votre code, vous avez tenté de mettre à jour la variable CSS à l'aide de setAttribute. Cependant, cette méthode n'est pas valide pour modifier les variables CSS.

Méthodes correctes :

Il existe trois méthodes correctes pour modifier les variables CSS avec JavaScript :

1. documentElement.style.cssText :

   • Syntaxe : documentElement.style.cssText = "--nom de la variable : nouvelle valeur"

2. documentElement.style.setProperty :

   • Syntaxe : documentElement.style.setProperty("- -nom-variable", "nouvelle valeur")

3. documentElement.setAttribute('style'):

   • Syntaxe : documentElement.setAttribute ('style', "--nom-variable : new-value")

Exemple :

Pour changer la variable --main-background-color en rouge :

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

Démo :

  
    
  


  
    <script>
      function changeColor() {
        setTimeout(() => {
          document.documentElement.style.cssText = &quot;--main-background-color: red&quot;;
        }, 2000);
      }
    </script>
  

Dans ce démo, la couleur d'arrière-plan passera au rouge après 2 secondes de chargement de la page.

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!