javascript - 从 JS 更改 css 变量的值会导致奇怪的行为

Question

:root{
    --name: "＊";
}

.test::before{
    font-size: 13px;
    Content: var(--name);
}

document.documentElement.style.setProperty("--name", "test");

我想像在这个JS中一样操作上面的CSS变量，但是当我运行这个JS时，“*”就消失了，并且“test”没有反射(reflect)出来。你知道原因吗？

(DeepL翻译)

Answer 1

你需要像下面那样做。请注意我添加的额外引用:

document.documentElement.style.setProperty("--name", "'test'");

:root{
    --name: "＊";
}

.test::before{
    font-size: 13px;
    Content: var(--name);
}

<div class="test"></div>