Menu
I am trying to use custom properties based on dynamic values, such as attr().
For instance, in below code, I tried to access both custom-properties based on the current element's id attribute.
: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>But it obviously fails.
Is there some way to achieve this?
259
In JavaScript, you can choose dynamic values or variable names and object names and choose to edit the variable name in the future without accessing the array. To do, so you can create a variable and assign it a particular value.
The simplest JavaScript method to create the dynamic variables is to create an array. In JavaScript, we can define the dynamic array without defining its length and use it as Map. We can map the value with the key using an array and also access the value using a key.
The grammar does not permit the first argument of a var() expression to be anything but a single custom property name that is hardcoded. This means that you cannot choose which custom property to reference in a var() expression using CSS, since it doesn't accept a string (or an attr() expression returning a string) for a property name. You'll need to set the value containing the var() expression using JS.
142
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
