如何在 var() 中设置动态属性名称

Question

我正在尝试使用基于动态值的自定义属性，例如attr()。

例如，在下面的代码中，我尝试根据当前元素的 id 属性访问两个自定义属性。

:root{
  --app-foo: 'Hello';
  --app-bar: 'World';
  }
div::after{
/* expected :
            'Hello' for #foo
            'World' for #bar    */
  content:  var('--app-'attr(id));
  }

<div id="foo"></div>
<div id="bar"></div>

但显然失败了。

有什么方法可以实现吗？

Answer 1

grammar 不允许var() 表达式的第一个参数是硬编码的单个自定义属性名称。这意味着您无法使用 CSS 选择在 var() 表达式中引用哪个自定义属性，因为它不接受字符串（或返回字符串的 attr() 表达式）作为属性名称。您需要使用 JS 设置包含 var() 表达式的值。