Skip to main content

Existe alguma forma de usar um "custom-attribute" como valor de uma propriedade CSS?

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>

hugocsl
  • 66,9mil
  • 17
  • 88
  • 166