将 JavaScript 中的 CSS 自定义属性/变量设置为 String 类型

Question

考虑以下场景：

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

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

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

CSS 能够通过使用带引号的 自定义属性 --text 的值来为变量设置 type

，但是当使用 javascript

setProperty

执行相同操作时，这是（检查）的结果节点（在 Chrome 中）不带引号，这使得它无法用作伪元素的

content

值：

这可以通过 JS 使用

setProperty

来完成吗？ （假设该元素的

style

属性中已经有一堆我不想弄乱的东西。

Answer 1

设置如下：

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))

Answer 2

如果正在利用数据绑定属性，例如Knockout JS，您可以使用模板文字语法设置“”字符串值

HTML

<div data-bind="style: {'--text': self.Word() }" style='--prefix: "";'>

JS

self.Word = ko.observable(`"${word}"`)

Answer 3

如果有人在 2024 年以后阅读本文，我们可以使用 registerProperty() 使用 @property CSS at-rule。

window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});