如何使用 JavaScript 动态更改 CSS :root 颜色变量？

在 JavaScript 中更改 CSS :root Color 变量

在 Web 开发领域，自定义网页的视觉美感通常是通过以下方式完成的CSS 变量的使用。这些变量在 CSS 的 :root 部分中定义，使开发人员能够控制设计的各个方面。一种常见的场景是能够使用 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 变量，并在单击按钮时动态更改网页上的颜色。

以上是如何使用 JavaScript 动态更改 CSS :root 颜色变量？的详细内容。更多信息请关注PHP中文网其他相关文章！