Adjust a CSS variable with a simple click

Question

Adjust a CSS variable with a simple click

I have a challenge where I want to double the value of an element's property every time it is clicked, using CSS variables. Here's what I have tried:

#circle_1 {
      width:50px;
      height:50px;
      width: var(--size_1, 50px);
      height: var(--size_1, 50px);
  }

And also this:

// Variables
  var circle_1 = document.querySelector("#circle_1");
  var size_1 = document.getPropertyValue("--size_1");

  // Function to grow the circle
  function growCircle() {
      var size_1_n = size_1 * 2;
      circle_1.style.setProperty("--size_1", size_1_n.value);
  }

  // Event listener
  var el = document.getElementById("circle_1");
  el.addEventListener("click", growCircle, false);

You can view the code snippet here https://codepen.io/daiaiai/pen/QQXrGz

However, nothing seems to be happening when I click. I suspect there might be something wrong with `var size_1 = document.getPropertyValue("--size_1");`, but I'm unable to pinpoint the issue. Any guidance would be greatly appreciated!

javascript css css-variables

Answer 1

Answer №1

Your codepen has several issues that need to be addressed for it to function correctly. I have made some adjustments and provided a working example instead.

Here are the key modifications I've made:

I added a :root declaration for the variable, allowing me to access the value of --size_1 at the element circle_1. This prevents getting NaN as the value in case the variable is not declared elsewhere in the styles.

You could use conditions to retrieve computed values for width or height, but I find it neater to set a default value in :root.
As you're setting the value with units like 50px rather than just 50, extracting the numerical part is necessary before doubling it. I achieved this using parseInt(size_1).

var circle_1 = document.querySelector("#circle_1");
var size_1 = document.body.style.getPropertyValue("--size_1");

// Function to enlarge the circle
function growCircle() {
  var size_1 = window.getComputedStyle(circle_1).getPropertyValue("--size_1");
  var size_1_n = parseInt(size_1) * 2;
  circle_1.style.setProperty("--size_1", size_1_n + "px");
}


// Event listener
circle_1.addEventListener("click", growCircle, false);

:root {
  --size_1: 50px;
}

body {
  margin: 100px;
}

#circle_1 {
  width: var(--size_1, 50px);
  height: var(--size_1, 50px);
  border-radius: 50%;
  margin-top: 20px;
  background-color: pink;
  opacity: 0.7;
  display: inline-block;
  transition: 0.3s;
}

div span {
  position: relative;
  top: 50%;
  left: 50%;
  text-align: center;
}

<div id="circle_1" draggable="true"><span>Group 1<span></div>

An alternative approach would be defining only the value component in the variable's :root declaration. You can then reference its value using width: calc(var(--size_1) * 1px).

In my opinion, this method is cleaner as the variable holds just the value part, enabling you to apply any unit during style declaration. It also eliminates the need for parsing the variable's value.

Below is the code snippet reflecting this approach:

var circle_1 = document.querySelector("#circle_1");
var size_1 = document.body.style.getPropertyValue("--size_1");

// Function to grow the circle
function growCircle() {
  var size_1 = window.getComputedStyle(circle_1).getPropertyValue("--size_1");
  var size_1_n = size_1 * 2;
  circle_1.style.setProperty("--size_1", size_1_n);
}


// Event listener
circle_1.addEventListener("click", growCircle, false);

:root {
  --size_1: 50;
}

body {
  margin: 100px;
}

#circle_1 {
  width: calc(var(--size_1, 50px) * 1px);
  height: calc(var(--size_1, 50px) * 1px);
  border-radius: 50%;
  margin-top: 20px;
  background-color: pink;
  opacity: 0.7;
  display: inline-block;
  transition: 0.3s;
}

div span {
  position: relative;
  top: 50%;
  left: 50%;
  text-align: center;
}

<div id="circle_1" draggable="true"><span>Group 1<span></div>

Answer 2

Your codepen has several issues that need to be addressed for it to function correctly. I have made some adjustments and provided a working example instead.

Here are the key modifications I've made:

I added a :root declaration for the variable, allowing me to access the value of --size_1 at the element circle_1. This prevents getting NaN as the value in case the variable is not declared elsewhere in the styles.

You could use conditions to retrieve computed values for width or height, but I find it neater to set a default value in :root.
As you're setting the value with units like 50px rather than just 50, extracting the numerical part is necessary before doubling it. I achieved this using parseInt(size_1).

var circle_1 = document.querySelector("#circle_1");
var size_1 = document.body.style.getPropertyValue("--size_1");

// Function to enlarge the circle
function growCircle() {
  var size_1 = window.getComputedStyle(circle_1).getPropertyValue("--size_1");
  var size_1_n = parseInt(size_1) * 2;
  circle_1.style.setProperty("--size_1", size_1_n + "px");
}


// Event listener
circle_1.addEventListener("click", growCircle, false);

:root {
  --size_1: 50px;
}

body {
  margin: 100px;
}

#circle_1 {
  width: var(--size_1, 50px);
  height: var(--size_1, 50px);
  border-radius: 50%;
  margin-top: 20px;
  background-color: pink;
  opacity: 0.7;
  display: inline-block;
  transition: 0.3s;
}

div span {
  position: relative;
  top: 50%;
  left: 50%;
  text-align: center;
}

<div id="circle_1" draggable="true"><span>Group 1<span></div>

An alternative approach would be defining only the value component in the variable's :root declaration. You can then reference its value using width: calc(var(--size_1) * 1px).

In my opinion, this method is cleaner as the variable holds just the value part, enabling you to apply any unit during style declaration. It also eliminates the need for parsing the variable's value.

Below is the code snippet reflecting this approach:

var circle_1 = document.querySelector("#circle_1");
var size_1 = document.body.style.getPropertyValue("--size_1");

// Function to grow the circle
function growCircle() {
  var size_1 = window.getComputedStyle(circle_1).getPropertyValue("--size_1");
  var size_1_n = size_1 * 2;
  circle_1.style.setProperty("--size_1", size_1_n);
}


// Event listener
circle_1.addEventListener("click", growCircle, false);

:root {
  --size_1: 50;
}

body {
  margin: 100px;
}

#circle_1 {
  width: calc(var(--size_1, 50px) * 1px);
  height: calc(var(--size_1, 50px) * 1px);
  border-radius: 50%;
  margin-top: 20px;
  background-color: pink;
  opacity: 0.7;
  display: inline-block;
  transition: 0.3s;
}

div span {
  position: relative;
  top: 50%;
  left: 50%;
  text-align: center;
}

<div id="circle_1" draggable="true"><span>Group 1<span></div>

Adjust a CSS variable with a simple click

Answer №1

Similar questions

Express error handling lacking clarity

Move the DIV element to the bottom of the webpage

The proper invocation of the success and error functions in jQuery is not being achieved for Ajax calls

React component refuses to re-render

Utilizing JSON information acquired through AJAX within a distinct function

When attempting to input a value in the middle of the line, the cursor unexpectedly leaps to the end

Troubleshooting a scope problem with ng-include while maintaining the original template

Disabling padding on TwitterTweetEmbed component in React Twitter Embed

Replace the value of a variable when another variable becomes false in Angular.js

Implementing conditional button visibility in Angular based on user authorization levels

Error: Appwrite Login Authentication failed due to account.createEmailSession function not recognized as a valid function

Bootstraps paves the way for the destruction of a dropdown element

Creating a LazyLoad setup with a scrolling DIV by utilizing the Intersection Observer API

Tips for converting API data to DTO (Data Transfer Object) using TypeScript

Creating a JavaScript function that responds to multiple click events

Troubleshooting problem with media queries in CSS

Tips for updating a plugin from phonegap 2.5 to the most recent version 3.1, and the steps to follow when including a new plugin in phonegap

Passing props in Vue router results in the props being undefined

Tips on minimizing the vertical size of a mat field housing a mat-select dropdown

The battle between Typography and HTML formatting elements