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

JavaScript を使用した CSS :root カラー変数の変更

Web 開発では、テーマのカスタマイズに、:root 要素内で定義された CSS カスタム プロパティ (「変数」) の利用が含まれることがよくあります。 JavaScript を使用してこれらの色を動的に変更するには、正しいアプローチを理解することが不可欠です。

JavaScript を使用して CSS 変数を設定する方法の 1 つは、 document.documentElement.style.setProperty 関数を使用することです。この関数は、変数名 (-- で始まる) と目的の値の 2 つのパラメータを受け入れます。たとえば、 --main-color 変数を黒に設定するには:

document.documentElement.style.setProperty('--main-color', '#000000');

このアプローチにより、CSS 変数が適切に更新され、JavaScript コードの変更が反映されます。

In提供されたコード例では、問題は $(':root').css('--main-color', '#000000') が jQuery .css() を使用していることです。このメソッドはインライン スタイル用に設計されており、CSS 変数を効果的に変更しません。

上記のように document.documentElement.style.setProperty 関数を利用すると、JavaScript を使用して :root 要素の CSS 変数を正常に変更できます。 、Web ページの動的なテーマのカスタマイズが可能になります。

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