Comment puis-je modifier par programme les variables CSS avec JavaScript ?-tutoriel CSS-php.cn

Comment puis-je modifier par programme les variables CSS avec JavaScript ?

Barbara Streisand

Libérer： 2024-12-10 18:35:14

original

716 Les gens l'ont consulté

How Can I Programmatically Change CSS Variables with JavaScript?

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";

Copier après la connexion

el.style. setProperty :

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

Copier après la connexion

el.setAttribute :

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

Copier après la connexion

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>

Copier après la connexion

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!