听 CSS 变量变化？

Question

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

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

Answer 1

style 属性中定义的变量

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

变量必须这样设置：

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

而不是这样的：

:root {
--var1: 1;
}

然后您可以监视目标元素的样式属性的更改。

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>变量必须在元素中定义
• style 元素应该只包含您想要观察的变量，以使其尽可能具体，并且在不相关的属性更改时不会触发观察者

然后，您可以用来MutationObserver监视样式元素的更改并解析其内容以检测哪些变量已更改。

Answer 2

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

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

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