Gostaria de saber se existe a possibilidade de usar um custom-attribute
do tipo data-*=" "
como valor para um estilo CSS ou mesmo usar esse custom data como valor para uma variável no CSS.
Para exemplificar melhor vou explicar minha ideia. Eu gostaria de colocar no elemento tipo <div data-opacity="0.5" ></div>
e essa div
ficar com 0.5 de opacidade. Logo eu preciso que de alguma forma o CSS reconheça esse valor de 0.5 do data-opacity
como o valor do opacity:
na classe
Eu tentei usar o attr
direto como valor do estilo opacity: attr(data-opacity)
e também tentei declarar como variável, porém tb não deu certo --data-opacity: attr(data-opacity)
Esse é só um exemplo de uso, mas poderia ser para cor, margens, etc Gostaria de saber se existe alguma forma de usar esse custom-attribute
como valor dentro do CSS?
Segue um exemplo do que eu gostaria de fazer, porém não funciona como está.
:root {
--data-opacity: attr(data-opacity);
--cor: #fff;
}
[data-opacity] {
color: var(--cor);
opacity: var(--data-opacity); /* não funciona */
/* opacity: attr(data-opacity); */ /* também não funciona */
}
.box {
width: 100px;
height: 100px;
background-color: #f00;
}
<div class="box" data-opacity="0.5">cor branca mas sem opacidade</div>
js
mas creio que logo aparecera uma versão apenas comCSS
, rs