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

JS を使用した CSS 変数の編集

プロジェクトのスタイルを動的に制御するために CSS 変数を編集しようとしています。 --main-background-image や --main-text-color などの変数を定義しているときに、属性を使用して値を変更しようとするとエラーが発生します。

根本原因

発生したエラーは、CSS を変更するための setAttribute メソッドの誤った使用が原因です変数.

解決策

CSS 変数を編集するには 3 つの方法がありますJS:

• style.cssText:

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

• style.setProperty:

  document.documentElement.style.setProperty("--main-background-color", "green");

• setAttribute ("style" 属性を使用):

  document.documentElement.setAttribute("style", "--main-background-color: green");

CSS 変数を正常に編集するには、コード スニペット内のコメント行を上記のいずれかの方法で置き換えます。

デモ

次のことを検討してください例:

html {
  --main-background-color: rgba(0,0,0,.25);
}

body {
  background-color: var(--main-background-color);
}

window.onload = function() {
  setTimeout(function() {
    document.documentElement.style.cssText = "--main-background-color: red";
  }, 2000);
};

このデモでは、--main-background-color の値は、ページの読み込みから 2 秒後に赤に変わります。

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