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

【问题标题】：Set CSS custom property/variable from javascript as type String将 javascript 中的 CSS 自定义属性/变量设置为 String 类型
【发布时间】：2021-01-27 23:22:38
【问题描述】：

考虑以下场景：

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 属性中已经有一堆我不想弄乱的东西。

【问题讨论】：

必须是 CSS 变量吗？你不能在body 上设置一个数据属性，然后在你的伪元素上使用content: attr(data-property) 吗？
是的，它必须是 Rickard

标签： javascript css dom css-variables

【解决方案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))

【讨论】：

【解决方案2】：

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

HTML

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

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

【讨论】：