如何从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');