How to do something based on CSS variable content?

Question

Let's say I have a CSS variable:

div {
  --test: "hey"
}

And I would like to check what is inside this variable and do something based on this.

For example:

if var(--test) == "Hi":
  margin-left: 1rem;
else:
  padding-bottom: 1rem;

Rounin · Accepted Answer · 2022-08-18 17:48:28Z

I would like to check what is inside this variable and do something based on this.

Yes, you can check the value of a CSS Custom Property natively using:

window.getComputedStyle(myDiv).getPropertyValue('--test')

Once you know the value of --test, you can either update one (or several) properties:

myDiv.style.setProperty('padding-bottom', '1rem');

or you can add a class which updates one property (or any number of properties) of myDiv:

myDiv.classList.add('increaseBottomPadding');

Working Example:

const divs = document.querySelectorAll('div');

divs.forEach((div) => {

  let testValue = window.getComputedStyle(div).getPropertyValue('--test');
  
  switch (testValue) {
    case ('rainbow1') : div.classList.add('background1'); break;
    case ('rainbow2') : div.classList.add('background2'); break;
    case ('rainbow3') : div.classList.add('background3'); break;
    case ('rainbow4') : div.classList.add('background4'); break;
  }
});

div {
  display: inline-block;
  float: left;
  width: 120px;
  height: 120px;
  margin-right: 12px;
  background-color: rgb(255, 0, 0);
  border: 8px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
}

.div1 {
  --test: rainbow1;
}

.div2 {
  --test: rainbow2;
}

.div3 {
  --test: rainbow3;
}

.div4 {
  --test: rainbow4;
}

.background1 {
  background-color: rgb(255, 0, 0);
}


.background2 {
  background-color: rgb(255, 127, 0);
}


.background3 {
  background-color: rgb(255, 255, 0);
}


.background4 {
  background-color: rgb(0, 127, 0);
}

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>

Laaouatni Anas · Accepted Answer · 2022-08-18 16:12:13Z

2

natively isn't possible, but with a css compiler you can!

I suggest you use SASS/SCSS for this:

https://sass-lang.com/ (is a CSS compiler, that let you write CSS in a comfortable way, then compile it (translating it) to a CSS native)

for using IF/ELSE see these docs https://sass-lang.com/documentation/at-rules/control/if

answered Aug 18, 2022 at 16:12

Laaouatni Anas

4,0852 gold badges14 silver badges36 bronze badges

2 Comments

Hostek Over a year ago

How can i use this with css variables?

Laaouatni Anas Over a year ago

@Hostek yes, but the syntax is different. a sass variable is $name an in CSS native was --name

Collectives™ on Stack Overflow

How to do something based on CSS variable content?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related