JavaScript の変更が CSS :root 変数に影響しないのはなぜですか?

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

ユーザーは、カラー変数を調整して Web ページのテーマを変更するシステムを実装することを目指していますCSS の :root セクションで定義されます。テーマを設定するための JavaScript コードを実装しているにもかかわらず、変化は観察されません。

提供されたコードは --main-color 変数を変更しようとしていますが、正しい構文が使用されていません。 JavaScript で :root 変数を変更する正しい方法は、 document.documentElement.style.setProperty() メソッドを使用することです。次の行を JavaScript コードに追加する必要があります:

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

ここで、#YOURCOLOR は目的の色の値を表します。たとえば、メインカラーを青に設定するには、次の行を使用する必要があります:

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

この行を JavaScript コードに組み込むことで、ユーザーは :root カラー変数を動的に変更できるようになります。 Web ページのテーマをカスタマイズできるようにします。

以上がJavaScript の変更が CSS :root 変数に影響しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。