时间戳

首页 > 解决方案 > CSS伪类在通过JS更新变量值后消失

javascript - CSS伪类在通过JS更新变量值后消失

问题描述

我希望能够通过 JS 更新 CSS 变量，但是当我更新变量时，CSS 伪元素会被破坏（即消失）。

这是 SCSS 代码：

:root {
  --test-thing: "";
}

.folder-1-open span::after {
    width: 90%;
    height: 85%;
    bottom: 0;
    left: 5%;
    background-color: #fff;
    z-index: 3;
    content: var(--test-thing);
}

我试图这样操纵变量：

const root = document.documentElement
root.style.setProperty('--test-thing', "Hello World")

上面的 CSS 在它所应用的元素（标签）上工作得非常好，基本上只是一个白色方块，但是一旦我尝试更新 CSS 变量--test-thing以通过content道具添加一个字符串，整个事情就消失了。

用伪元素或类不可能做到这一点吗？

通过研究 SO 上的相关帖子，我的理解是使用 CSS 变量是可能的。

对于上下文，我正在处理这个纯 CSS 交互式文件夹的示例（当它打开时，我想动态更新内容）。

标签： javascriptcssfrontendpseudo-elementcss-variables

解决方案

好的，我知道为什么会这样了。仍然不是 100% 确定原因，但这与新值不在引号中的事实有关。只需将值放在引号中，它就可以正常工作。

const root = document.documentElement
root.style.setProperty('--test', "'Hello World'") // <-- this needs to be in quotes
:root {
  --test: "";
}

#test {
  height: 100px;
  width: 100px;
  background: #ccc;
}
#test:after {
  content: var(--test);
  min-width: 100px;
  background: #000;
  min-height: 30px;
  color: #fff;
}
<div id="test">

</div>

推荐阅读