在 javascript 中更改 css 自定义属性

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

Answer 1

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);
  });