监听 CSS 变量变化？

Question

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

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

Answer 1

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

但是通过使用 Window.getComputedStyle() 方法并在一定时间间隔内检查其 return 值（不利于性能），您可以观察样式变化并对其做出反应。

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

Answer 2

样式属性中定义的变量

如果您可以完全控制代码并且可以通过 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 元素的，它通常是您放置全局变量的地方，但它可以与任何其他元素一起使用。

样式表中定义的变量

如果您愿意以特定方式定义样式表，这是可能的：

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

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

监听 CSS 变量变化？

Listen to CSS variable change?

javascript

css

css-variables

样式属性中定义的变量

样式表中定义的变量