将来自javascript的CSS自定义属性/变量设置为String类型 问题出在这里：哪个可以通过以下方式解决：

问题描述

请考虑以下情形：

document.body.style.setProperty("--text","world")

body::before{
  --text: "Hello";
  content: var(--text,"...");
}

body::after{
  content: var(--text,"...");
}

通过使 custom属性 --text带有引号，

CSS可以为变量设置 类型 。但是使用javascript setProperty进行同样操作时，这是（受检查的）节点（在Chrome中）的结果，该节点不带引号，因此无法将其用作伪元素的content值：

是否可以使用setProperty通过JS完成此操作？ （假设该元素的style属性中已经有很多东西，我不想弄乱。

解决方法

找到了。需要将其设置为：

document.body.style.setProperty("--text","'world'")

问题出在这里：

var word = "world";

document.body.style.setProperty("--text",word)

body::before{
  --text: "Hello";
  content: var(--text,"...");
}

body::after{
  content: var(--text,"...");
}

哪个可以通过以下方式解决：

document.body.style.setProperty("--text",JSON.stringify(word))