Comment puis-je modifier dynamiquement les variables CSS à l'aide de JavaScript ?

Modification des variables CSS avec JS

Vous essayez de modifier des variables CSS pour contrôler dynamiquement le style de votre projet. Pendant que vous avez défini des variables telles que --main-background-image et --main-text-color, vous êtes confronté à une erreur lorsque vous essayez de modifier leurs valeurs à l'aide d'attributs.

Cause première

L'erreur que vous avez rencontrée est due à une utilisation incorrecte de la méthode setAttribute pour changer le CSS variables.

Solution

Il existe trois méthodes pour éditer les variables CSS avec JS :

• style.cssTexte :

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

• style.setProperty :

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

• setAttribute (avec l'attribut "style") :

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

Dans votre extrait de code, remplacez les lignes commentées par l'une des méthodes ci-dessus pour réussir à modifier les variables CSS.

Démo

Considérez ce qui suit exemple :

html {
  --main-background-color: rgba(0,0,0,.25);
}

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

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

Dans cette démo, la valeur --main-background-color passe au rouge deux secondes après le 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!