如何在var（）中设置动态属性名称

Question

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但它显然失败了。

有没有办法实现这个目标？

Answer 1

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