JavaScript を使用して CSS 変数を正しく変更するにはどうすればよいですか?

Style.setProperty を使用して JavaScript で CSS 変数を編集する方法

CSS では、変数を使用してカラー テーマやその他の設定を一度定義できます。プロジェクト全体で使用してください。これらの変数を JavaScript で動的に編集するには、適切なメソッドを利用する必要があります。

間違ったメソッド:

コード内で、setAttribute を使用して CSS 変数を更新しようとしました。ただし、この方法は CSS 変数の編集には無効です。

正しい方法:

CSS 変数を編集するには 3 つの正しい方法があります。 JavaScript:

1. documentElement.style.cssText:

   • 構文: documentElement.style.cssText = "--変数名:新しい値"

2. documentElement.style.setProperty:

   • 構文: documentElement.style.setProperty("- -変数名", "新しい値")

3. documentElement.setAttribute('style'):

   • 構文: documentElement.setAttribute ('スタイル', "--変数名: new-value")

例:

--main-background-color 変数を次のように変更するには赤:

document.documentElement.style.cssText = "--main-background-color: red";

デモ:

  
    
  


  
    <script>
      function changeColor() {
        setTimeout(() => {
          document.documentElement.style.cssText = &quot;--main-background-color: red&quot;;
        }, 2000);
      }
    </script>
  

このデモでは、ページの読み込み 2 秒後に背景色が赤に変わります。

以上がJavaScript を使用して CSS 変数を正しく変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。