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

Question

在 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";}

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

score 1 · Accepted Answer

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

body {
   --Warning: "warning";
}

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

和

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

1 回答 1