19. Cambiar variables CSS con Javascript

Las variables CSS tienen acceso al DOM, lo que significa que puedes cambiarlas con Javascript. Este es un ejemplo de cómo puede crear un script para mostrar y cambiar la variable –blue del ejemplo utilizado en las páginas anteriores.

Ejm

<!DOCTYPE html>
<html>
  <head>
    <style>
      :root {
        --blue: #1e90ff;
        --white: #ffffff;
      }

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

      h2 {
        border-bottom: 2px solid var(--blue);
      }

      .container {
        color: var(--blue);
        background-color: var(--white);
        padding: 15px;
      }

      .container button {
        background-color: var(--white);
        color: var(--blue);
        border: 1px solid var(--blue);
        padding: 5px;
      }
    </style>

    <script>
      // Get the root element
      var r = document.querySelector(":root");

      // Create a function for getting a variable value
      function myFunction_get() {
        // Get the styles (properties and values) for the root
        var rs = getComputedStyle(r);
        // Alert the value of the --blue variable
        alert("The value of --blue is: " + rs.getPropertyValue("--blue"));
      }

      // Create a function for setting a variable value
      function myFunction_set() {
        // Set the value of variable --blue to another value (in this case "lightblue")
        r.style.setProperty("--blue", "lightblue");
      }
    </script>
  </head>
  <body>
    <h1>Get and Change CSS Variable With JavaScript</h1>

    <div class="container">
      <h2>Lorem Ipsum</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper
        diam at erat pulvinar, at pulvinar felis blandit.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper
        diam at erat pulvinar, at pulvinar felis blandit.
      </p>
      <p>
        <button>Yes</button>
        <button>No</button>
      </p>
    </div>
    <br />

    <button type="button" onclick="myFunction_get()">
      Get CSS Variable with JavaScript
    </button>
    <button type="button" onclick="myFunction_set()">
      Change CSS Variable with JavaScript
    </button>
  </body>
</html>
Scroll al inicio