How to put javascript variable value in CSS?

Question

How to put javascript variable value in CSS?

Navigation

#1 by (0 votes)

0

I have a code on the site style page (css) to make an animation, but the animation time should vary according to a variable that is in javascript, how do I get the value of this variable to enter into my css code ?

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>

How could I do this?

javascript html css

asked by anonymous 10.12.2018 / 00:04

1 answer

Struct with JSON in C ++ Retrieve the value of an input with echo from the while loop

score 0 · Answer 1

You can use CSS's own variables and update via JavaScript. Ex.:

Defining the variable via CSS.

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

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

Updating through 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);
}