javascript - 如何全局存储颜色，以便它们在 js、css 和 html 中可见？

Question

我有一个网站的颜色主题。到目前为止，每次使用时我都是手动为每个元素添加颜色。

拥有一组带有颜色的全局变量会更容易，这样如果我决定更改一个，我就不必遍历每个文件来手动将每个实例更改为新颜色。

这可能吗？

Answer 1

可以使用 CSS variables .

您可以在 CSS 中像这样定义一个变量:

body {
  --my-color: #000;
}

然后像这样在你的 CSS 或 HTML 中的任何地方使用它:

p {
  color: var(--my-color);
}

或

<p style="color: var(--my-color)"></p>

您可以通过以下方式从 JS 中检索变量值:

getComputedStyle(document.body).getPropertyValue('--my-color');

现在您的变量可以从 CSS、HTML 和 JS 获得。