JavaScript Change CSS Variable Root

This tutorial will guide you through the process of using Javascript Change Css Variable Root, allowing you to dynamically modify the appearance of your website by altering CSS variables directly from JavaScript. This technique is incredibly useful for creating interactive themes, customizable components, and engaging user experiences.

Setting Up the HTML Structure

First, we need to create the basic HTML structure for our interactive elements and the content that will be styled using CSS variables. This includes input elements for controlling the variable values and an image to demonstrate the effects.

<h2>Update CSS Variables with <span class="hl">JS</span></h2>

    <div class="controls">
      <label for="spacing">Spacing:</label>
      <input
        id="spacing"
        type="range"
        name="spacing"
        min="10"
        max="200"
        value="10"
        data-sizing="px"
      />

      <label for="blur">Blur:</label>
      <input
        id="blur"
        type="range"
        name="blur"
        min="0"
        max="25"
        value="10"
        data-sizing="px"
      />

      <label for="base">Base Color</label>
      <input id="base" type="color" name="base" value="#ffc600" />
    </div>

    <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500" />
    <script  src="./script.js"></script>

Styling with CSS Variables

Next, we’ll define the CSS variables in the :root pseudo-class and apply them to the elements we want to control dynamically. This allows us to change the styles of multiple elements by simply updating the value of a single CSS variable.

:root {
  /* CSS Variables */
  --base: #ffc600;
  --spacing: 10px;
  --blur: 10px;
}

img {
  padding: var(--spacing);
  background: var(--base);
  filter: blur(var(--blur));
}

.hl {
  color: var(--base);
}

body {
  text-align: center;
  background: #193549;
  color: white;
  font-family: "helvetica neue", sans-serif;
  font-weight: 100;
  font-size: 50px;
}

.controls {
  margin-bottom: 50px;
}

input {
  width: 100px;
}

Implementing JavaScript Logic to Manipulate CSS Variables

Now comes the fun part! We’ll use JavaScript to listen for changes in the input elements and update the corresponding CSS variables in the :root. This is done by accessing the document.documentElement and setting the setProperty for each variable.

const inputs = document.querySelectorAll(".controls input");
console.log(inputs);

function handleUpdate() {
  const suffix = this.dataset.sizing || "";
  document.documentElement.style.setProperty(
    `--${this.name}`,
    this.value + suffix
  );
}

inputs.forEach(input => input.addEventListener("change", handleUpdate));
inputs.forEach(input => input.addEventListener("mousemove", handleUpdate));

By following these steps, you’ve successfully implemented Javascript Change Css Variable Root. You can now dynamically update CSS variables and create interactive styling effects on your webpage. This technique opens up a world of possibilities for creating customizable and engaging user interfaces.