在 javascript 中更改 css 自定義屬性

Question

我有一個 JSX 模塊（card.jsx），它在另一個組件中調用以創建該模塊（card.jsx）的 5 個實例。

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

在我的 card.css 中，我填充了一個自定義屬性調用。

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

在我的 card.jsx 中，我嘗試為 css 自定義變量“填充”設置不同的值。

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

只有第一個實例使用新值，所有其他實例使用 css 文件中設置的默認“填充”值。 發生了什么？ 什么是解決方法？ 謝謝

Answer 1

要更改 .wave class 中元素的每個實例的 CSS 屬性，您可以更改某些共同祖先元素中的屬性，而不是更改 .wave 元素本身的屬性，或者您可以通過所有的.wave 元素更改其屬性。

因此，不要使用 querySelector，它只為您提供 class 中的第一個元素，而是使用 querySelectorAll，它為您提供 class 中所有元素的集合。 然后，您可以遍歷它們，分別為每個變量設置 CSS 變量：

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