Skip to main content
Tweeted twitter.com/StackOverflowPT/status/1042111183451578368

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

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

Existe alguma forma de usar um "custom-attribute" como valor de uma proprieda 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>