CSS 变量：如何将变量设置为 HTML 中存在的值？答案

【问题标题】：CSS Variables: how can I set a variable to a value that's present in the HTML?CSS 变量：如何将变量设置为 HTML 中存在的值？
【发布时间】：2020-11-18 23:48:08
【问题描述】：

在 CSS Paged Media 中，有一个名为 string-set 的有用函数，它允许您定义一个字符串并在任何地方使用它：

body {  string-set: warningTextVar attr(data-var-TxtWarning);}

.warning::before {
content: warningTxtVar;
}

HTML：

<body data-var-TxtWarning="Warning: ">
    <p class="warning">this is the warning text.</p>

输出（使用 Antennahouse Formatter 渲染时）：
警告：这是警告文本。

我不能让它在浏览器中工作，因为 string-set 已被弃用。所以我正在寻找一种方法来替换浏览器中的“字符串集”功能。

显而易见的是一个变量：

body {--Warning: content attr(data-var-TxtWarning);}

但这似乎不起作用。我可以用字符串填充变量：

body {--Warning: "Warning";}

但是当我尝试读取属性值时，它失败并且变量保持为空。

【问题讨论】：

标签： css css-paged-media

【解决方案1】：

如果您已经使用数据属性更改 HTML，为什么不直接从 HTML 样式属性中设置 CSS 变量？

body {
   --Warning: "warning";
}

body .banner:after {
   content: var(--Warning);
}

和

<body style="--Warning:'New Warning Text';">...</body>

【讨论】：

如果可能的话，我想保持与 CSS Paged Media 输出的共性。将变量放入 HTML 会丢失这一点。