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

Question

我在一个 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 类中定义变量时，我不知道如何使它工作。请帮忙。

Answer 1

这就是 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');