如何在 var() 中设置动态 属性 名称
How to set a dynamic property name in var()
我正在尝试使用基于动态值的自定义属性，例如 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>
但显然失败了
有什么方法可以实现吗？
grammar 不允许 var() 表达式的第一个参数只能是硬编码的单个自定义 属性 名称。这意味着您不能选择在使用 CSS 的 var() 表达式中引用哪个自定义 属性，因为它不接受字符串（或返回字符串的 attr() 表达式) 用于 属性 名称。您需要使用 JS 设置包含 var() 表达式的值。
我正在尝试使用基于动态值的自定义属性，例如 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>
但显然失败了
有什么方法可以实现吗？
grammar 不允许 var() 表达式的第一个参数只能是硬编码的单个自定义 属性 名称。这意味着您不能选择在使用 CSS 的 var() 表达式中引用哪个自定义 属性，因为它不接受字符串（或返回字符串的 attr() 表达式) 用于 属性 名称。您需要使用 JS 设置包含 var() 表达式的值。