CSS伪class通过JS更新变量值后消失
CSS pseudo class disappears after variable value update via 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
属性添加一个字符串,整个事情就消失了。
用伪元素或class做不到吗?
通过研究 SO 上的相关帖子,我的理解是使用 CSS 变量是可能的。
对于上下文,I’m working off this example 纯 CSS 交互式文件夹(当它打开时我想动态更新内容)。
好的,我大概明白了为什么会这样。仍然不能 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>
我希望能够通过 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
属性添加一个字符串,整个事情就消失了。
用伪元素或class做不到吗?
通过研究 SO 上的相关帖子,我的理解是使用 CSS 变量是可能的。
对于上下文,I’m working off this example 纯 CSS 交互式文件夹(当它打开时我想动态更新内容)。
好的,我大概明白了为什么会这样。仍然不能 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>