2

Tenho na página de estilo (css) do site um código para fazer uma animação, mas o tempo da animação deve variar de acordo com uma variável que está no javascript, como faço pra que o valor dessa variável entre no meu código css?

css

div.progresso {
    animation: loading "tempo"s ease;
}

javascript

<script >
    var som1 = document.getElementById("player");
    som1.onloadeddata = function() {
    console.log("tempo:" + player.duration + "segundos");;
    var tempo = player.duration;
    <codigo pra colocar o valor da 'var tempo' naquele lugar especifico do css>
</script>

Como poderia fazer isso?

2
  • Tenta usar a propriedade style: document.querySelector("div.progresso").style.animation = "loading " + tempo + "s ease"
    – Francisco
    Commented 9/12/2018 às 23:45
  • Po funcionou perfeitamente aí sim ein parceiro. Obrigado!
    – Yound
    Commented 10/12/2018 às 0:11

1 Resposta 1

5

Você pode utilizar as variáveis do próprio CSS e atualizar via JavaScript. Ex.:

Definindo a variável via CSS.

:root{
    --tempo-animacao: 1s;
}

div.progresso {
    animation: loading var(--tempo-animacao) ease;
}

Atualizando por JS.

var root = document.documentElement;

var som1 = document.getElementById("player");
som1.onloadeddata = function() {
   console.log("tempo:" + player.duration + "segundos");;
   var tempo = player.duration;
   root.style.setProperty('--tempo-animacao', tempo);
}    

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .