如何从javascript访问css类中定义的css变量？

我在css类中定义了css变量

.popup {
    --popup-opacity: 0;
    --popup-visibility: hidden;
    opacity: var(--popup-opacity);
    visibility: var(--popup-visibility);
}

我想用javascript更新这个。如果变量位于根元素内，则以下代码有效：

 document.documentElement.style.setProperty('--popup-opacity', 1);
 document.documentElement.style.setProperty('--popup-visibility', 'visible');

---

当css类中定义了变量时，我不知道如何使它工作。请提供帮助。

这就是JS中继承的工作方式

如果您已经使用类选择器在规则集中设置了变量的值，那么该元素将不会从DOM的上层继承

如果您设置

.popup{color:red；}

，然后想知道为什么在设置

document.documentElement.style.setProperty（'color'，'red'）时它仍然是红色，那么您会遇到同样的问题

在DOM的更高层定义变量：

html {
    --popup-opacity: 0;
    --popup-visibility: hidden;
}

.popup {
    opacity: var(--popup-opacity);
    visibility: var(--popup-visibility);
}

然后在同一级别或其与读取位置之间的级别重写它们：

 document.body.style.setProperty('--popup-opacity', 1);
 document.body.style.setProperty('--popup-visibility', 'visible');

参考这个