changing css custom properties in javascript

Question

i've a JSX module(card.jsx) which is call in another component to create 5 instances of this module(card.jsx).

import card.css
...
 <div className='cistern'>
        <div className="shape">
          <div className="wave"></div>
        </div>
      </div>

in my card.css, i have a custom property call filled.

.wave {
    position: absolute;
    --filled: 20%;

in my card.jsx i try to set different value for the css custom variable "filled".

 React.useEffect(() => {
  var cisternProperty =  document.querySelector( '.wave' )
  cisternProperty.style.setProperty('--filled', showFilledRoundString)
  console.log('show Tank Level', showFilledRoundString)
 }, [])

only the first instance use the new value, all other instance used the default "filled" value set in the css file. what's happening? what could be the workaround? thanks

cisternProperty.style.setProperty will only set that property on the first element due to using document.querySelector. It does not apply the property to the css class. — evolutionxbox
– evolutionxbox, Commented Jan 7, 2022 at 13:51
You may have to overwrite the class by creating a new style element. stackoverflow.com/questions/1212500/… — evolutionxbox
– evolutionxbox, Commented Jan 7, 2022 at 13:53
You either have to write the property for every instance of cisternProperty (use quesrySelectorAll to get all waves) or set the property not within the wave class but in some ancestor that is common to them all. — A Haworth
– A Haworth, Commented Jan 7, 2022 at 14:47
@AHaworth could you elaborate a bit more the querySelectorAll alternative? thanks — Egom
– Egom, Commented Jan 7, 2022 at 15:46

A Haworth · Accepted Answer · 2022-01-07 16:17:12Z

3

To change the CSS property for every instance of an element in the .wave class you can either change the property in some common ancestor element rather than in the .wave elements themselves or you can go through all the .wave elements change their property.

So instead of using querySelector, which gives you only the first element in that class, use querySelectorAll which gives you a collection of all the elements in that class. You can then loop through them setting the CSS variable individually for each one:

  var cisternProperties =  document.querySelectorAll( '.wave' );
  cisternProperties.forEach( cisternProperty => {
    cisternProperty.style.setProperty('--filled', showFilledRoundString);
  });

answered Jan 7, 2022 at 16:17

A Haworth

37.5k4 gold badges17 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Egom Over a year ago

since i'm using map to render each card.jsx instance and showFilledRoundString have a different value for each instance, seem difficult to do these operations within the map call.

evolutionxbox Over a year ago

Please be aware that the new property will not apply to any new elements using that class.

Egom Over a year ago

@evolutionxbox how would you do it?

A Haworth Over a year ago

@Egom, understood (now!) I was just thinkng basic JS.

evolutionxbox Over a year ago

@Egom create a new style element and put the modified class definition in that

MrinmoyB · Accepted Answer · 2023-11-21 07:59:25Z

0

Try the below:

Set the property in a parent element so that it is visible to all child elements

React.useEffect(() => {
  var cisternProperty =  document.querySelector( '.shape' )
  cisternProperty.style.setProperty('--filled', showFilledRoundString)
  console.log('show Tank Level', showFilledRoundString)
 }, [])

In CSS, do not define the property but use it with a default value. Here the assumption is that it is used by the element with classname wave

.wave {
    position: absolute;
    height: var(--filled, 20%);
}

answered Nov 21, 2023 at 7:59

MrinmoyB

214 bronze badges

Collectives™ on Stack Overflow

changing css custom properties in javascript

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related