更改根颜色 JS - JavaScript

在 JavaScript 中，我们可以通过以下步骤来更改根元素的颜色：

1. 使用 document.documentElement 选择根元素。
2. 使用 setProperty 方法来设置 --root-color 变量的值。
3. 在 CSS 中使用 var(--root-color) 来引用该变量。

以下是一个例子：

// 选择根元素
const root = document.documentElement;

// 设置根颜色变量
root.style.setProperty('--root-color', '#f00');

上面的代码使用 JavaScript 设置了 --root-color 变量的值为红色。现在，在我们的 CSS 中，可以使用以下代码来应用相同的颜色：

body {
  background-color: var(--root-color);
}

这将会将整个页面的背景颜色设置为红色。

实时更改根颜色

我们可以将上面的代码封装到一个函数中，并将其与一个 HTML 按钮相关联，以允许用户在运行时更改根颜色。

<button onclick="changeColor('#00f')">蓝色</button>
<button onclick="changeColor('#0f0')">绿色</button>
<button onclick="changeColor('#f00')">红色</button>

function changeColor(color) {
  const root = document.documentElement;
  root.style.setProperty('--root-color', color);
}

当用户单击“蓝色”按钮时，页面的根元素颜色将更改为蓝色。类似地，单击“绿色”和“红色”按钮时，根颜色将更改为相应颜色。

总结

在 JavaScript 中更改根颜色是一项非常简单的任务，只需要使用 document.documentElement.style.setProperty 方法即可。而且，我们甚至可以将其与 HTML 按钮结合使用，实现实时更改根颜色的效果。