Maison >interface Web >tutoriel CSS >Comment puis-je modifier par programme les variables CSS avec JavaScript ?
Comment puis-je modifier par programme les variables CSS avec JavaScript ?
- Barbara Streisandoriginal
- 2024-12-10 18:35:14743parcourir
Modification des variables CSS avec JavaScript
Contrôler les couleurs d'un projet via des variables CSS permet une création de thème facile. Cependant, définir ces variables par programme peut être difficile.
Au départ, des tentatives ont été faites pour modifier l'attribut à l'aide de setAttribute et de la méthode .css de jQuery. Cependant, cela entraînait des erreurs.
Solution :
Les variables CSS peuvent être modifiées à l'aide de l'une de ces trois méthodes :
-
el.style.cssTexte :
document.documentElement.style.cssText = "--main-background-color: red";
-
el.style. setProperty :
document.documentElement.style.setProperty("--main-background-color", "green"); -
el.setAttribute :
document.documentElement.setAttribute("style", "--main-background-color: green");
Le la dernière méthode était celle utilisée initialement mais avec une syntaxe incorrecte.
Démo :
Cette démo montre une variable CSS qui définit une couleur d'arrière-plan, qui est modifiée par JavaScript après 2 secondes :
<html>
<head>
<style>
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);
}
</style>
</head>
<body onload="setTimeout(function() {
document.documentElement.style.cssText = '--main-background-color: red';
}, 2000);">
</body>
</html>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!