JavaScript で CSS :root カラー変数を動的に変更する方法

JavaScript での CSS :root カラー変数の変更

Web 開発の領域では、Web ページの見た目の美しさのカスタマイズは、多くの場合、 CSS変数の使用。これらの変数は CSS の :root セクション内で定義されており、開発者は設計のさまざまな側面を制御できます。一般的なシナリオの 1 つは、JavaScript を使用してこれらの色を動的に変更できることです。

これを実現するには、重要なコード部分は次のとおりです。

document.documentElement.style.setProperty('--your-variable', '#YOURCOLOR');

この行は基本的に、 :root セクションで、その値を目的の色に更新します。たとえば、 --main-color 変数を黒に変更する場合は、次のコードを使用します:

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

このコードを質問で提供されている例に適用します:

function setTheme(theme) {
  if (theme == 'Dark') {
    localStorage.setItem('panelTheme', theme);
    $('#current-theme').text(theme);
    document.documentElement.style.setProperty('--main-color', '#000000');
  }
  if (theme == 'Blue') {
    localStorage.setItem('panelTheme',  'Blue');
    $('#current-theme').text('Blue');
    alert("Blue");
  }
  if (theme == 'Green') {
    localStorage.setItem('panelTheme', 'Green');
    $('#current-theme').text('Green');
    alert("Green");
  }
}

この更新されたコードは --main-color 変数を正常に変更し、ボタンがクリックされたときに Web ページ上の色を動的に変更します。

以上がJavaScript で CSS :root カラー変数を動的に変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。