听 CSS 变量变化？答案

【问题标题】：Listen to CSS variable change?听 CSS 变量变化？
【发布时间】：2020-01-15 23:34:36
【问题描述】：

是否可以使用回调来监听 CSS 变量的变化？像这样：

documentElement.addListener('css-var-main-background-color', () => {
  console.log('Value changed');
});

【问题讨论】：

你指的是这种类型的CSS变量吗？ developer.mozilla.org/en-US/docs/Web/CSS/…
扪心自问...css变量如何变化？
好像和这个stackoverflow.com/questions/55590763/…有关
还有这个stackoverflow.com/questions/2157963/…
@PraveenSoni - 你的第一个相关链接：this only works with inline styles - 这与 CSS“变量”有什么关系？

标签： javascript css css-variables

【解决方案1】：

样式属性中定义的变量

如果您可以完全控制代码并且可以通过 DOM 元素上的 style 属性而不是使用样式表来设置 CSS 变量，则可以使用 MutationObserver 来检测该元素的样式属性的更改，从而检测更改到变量。

变量必须这样设置：

document.documentElement.style.setProperty('--var1', '1');

不是这样的：

:root {
--var1: 1;
}

然后就可以监控目标元素的style属性的变化了。

let value = '1';

const styleObserver = new MutationObserver((mutations) => {
  const currentValue = mutations[0].target.style.getPropertyValue('--var1');

  if (currentValue !== value) {
    // the variable has changed
    value = currentValue;
  }
});

styleObserver.observe(document.documentElement, {
  attributes: true,
  attributeFilter: ['style'],
});

上面的例子是 html 元素，它通常是你放置全局变量的地方，但它可以与任何其他元素一起使用。

样式表中定义的变量

最通用的解决方案是使用 setInterval 和 getComputedStyle 就像另一个答案所暗示的那样，但这不是您希望在生产环境中拥有的东西。

如果您愿意以特定方式定义样式表，则有一种可能的解决方法：

变量必须在<style></style> 元素中定义
样式元素应仅包含您要观察的变量，以使其尽可能具体，并且在不相关的属性发生变化时不触发观察者

然后您可以使用MutationObserver 观察样式元素的变化并解析其内容以检测哪些变量发生了变化。

【讨论】：

【解决方案2】：

简单的回答：“不，这是不可能的。”

但是通过使用 Window.getComputedStyle() 方法并在一定时间间隔内检查其返回值（对性能不利），您可以观察并响应样式更改。

您可以在此处阅读getComputedStyle() https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

【讨论】：