javascript - 听 CSS 变量变化？

Question

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

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

Answer 1

style 属性中定义的变量
如果您可以完全控制代码并且可以通过 style 设置 CSS 变量DOM 元素上的属性而不是使用样式表，您可以使用 MutationObserver检测该元素的样式属性的变化，从而检测变量的变化。
变量必须像这样设置:

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> 中定义元素

样式元素应该只包含你想要观察的变量，以使其尽可能具体，并且在不相关的属性发生变化时不会触发观察者

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