时间戳

首页 > 解决方案 > 如何从javascript访问css类中定义的css变量？

javascript - 如何从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 类中定义变量时，我无法弄清楚如何使其工作。请帮忙。

标签： javascriptcsscss-variables

解决方案

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

推荐阅读