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

Question

:root{\n    --name: "\xef\xbc\x8a";\n}\n\n.test::before{\n    font-size: 13px;\n    Content: var(--name);\n}\n

\n

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

\n

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

\n

（DeepL 翻译）

\n

Answer 1

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

\n

\r\n

\r\n

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

\r\n

:root{\n    --name: "\xef\xbc\x8a";\n}\n\n.test::before{\n    font-size: 13px;\n    Content: var(--name);\n}

\r\n

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

\r\n

\r\n

\r\n

\n