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

Posted 2023-03-22

【中文标题】从 JS 更改 css 变量的值会导致奇怪的行为

【英文标题】：Changing the value of a css variable from JS causes strange behavior

【发布时间】：2021-11-13 12:57:27

【问题描述】：

:root
    --name: "＊";


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

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

我想像在这个 JS 中一样操作上面的 css 变量，但是当我运行这个 JS 时，“*”就消失了，“test”没有反映。你知道原因吗？

（由DeepL翻译）

【参考方案1】：

您需要执行以下操作。请注意我添加的额外引号：

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

:root
    --name: "＊";


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

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

【讨论】：

谢谢！另外，顺便问一下，我如何指定一个变量？ document.documentElement.style.setProperty("--name", a);

@さかな 像这样：jsfiddle.net/ds5mqy7b?