javascript - 如何在 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

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