Bagaimana untuk Tukar Secara Dinamik CSS :root Pembolehubah Warna dengan JavaScript?

Menukar CSS :root Color Variables dalam JavaScript

Dalam bidang pembangunan web, menyesuaikan estetika visual halaman web selalunya dicapai melalui penggunaan pembolehubah CSS. Pembolehubah ini, yang ditakrifkan dalam bahagian :root CSS, membolehkan pembangun mengawal pelbagai aspek reka bentuk. Satu senario biasa ialah keupayaan untuk menukar warna ini secara dinamik menggunakan JavaScript.

Untuk mencapai ini, sekeping kod utama ialah:

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

Baris ini pada dasarnya mengubah suai pembolehubah CSS yang ditentukan dalam : bahagian akar, mengemas kini nilainya kepada warna yang dikehendaki. Sebagai contoh, jika anda ingin menukar pembolehubah --main-color kepada hitam, anda akan menggunakan kod berikut:

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

Menggunakan kod ini pada contoh yang disediakan dalam soalan:

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");
  }
}

Kod yang dikemas kini ini berjaya mengubah suai --main-color pembolehubah dan menukar warna pada halaman web secara dinamik apabila butang diklik.

Atas ialah kandungan terperinci Bagaimana untuk Tukar Secara Dinamik CSS :root Pembolehubah Warna dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!