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