在 Typescript 中运行时更改 CSS 变量的值

Question

我有一个 Angular 4 Web 应用程序，需要根据从后端获取的颜色值和图像 url 设置样式。我已成功将 Web 应用程序配置为使用从服务器发送的图像 URL 来加载所需的图像，但颜色值的问题更具挑战性。应用程序中很多地方使用的原色都在 styles.css 文件中作为 css 变量。

:root {
--grape: #4b286d;
--purple: #651f97;
--purp-button-on-hover: #6d4299;
--accessibility-green: #248700;
--green-button-on-hover: #36ad0a;
--telus-grey: #595859;
--text-grey: #54595f;
--bg-grey: #e2e2e2;
--secondary-bg: #f5f5f5;
--white: #fff;
--almost-white: #f3f3f3;
--footer-bg: #333333;
--footer-copyright: #595853;
--select-title: #4a4a4a;
--pale-grey: #f5f6f7;
--select-gradient: linear-gradient(to bottom, #f2f2f2, #d4d4d4);
--select-border: #979797;
--font-type: "Helvetica Neue", helvetica, arial, sans-serif;
--font-light: 300;
}

我希望能够在打字稿中将这些值更改为首次加载应用程序时从服务器获取的值。我发现的方法似乎涉及获取 HTMLElement 并将其样式颜色更改为我想要的颜色，这意味着我必须一次更改每个元素的整个应用程序的颜色。有更好的方法来实现这一目标吗？谢谢。

Answer 1

由于这些值是在根级别定义的，因此您可以使用 document.properties 来更新它们。我不太确定如何以角度访问文档，但是一旦有了文档，您可以执行以下操作：

document.documentElement.style.setProperty(`--${your-variable}`, value + suffix); //suffix may be px or ''

这样，您将直接设置 css 变量，该变量将在所有位置生效，而不必针对单个元素。