To define the value of a css variable by java Script

Question

I want to define the Progress css via java script, making it change with a value I put in the Html input. take a look:

HTML:

    <link rel="stylesheet" type="text/css" href="HPCSS.css"> 
</head>

<div class="teste"></div>
<input id="vida" onchange="update()">
<script type="text/javascript" src="HPJS.js"></script> 

CSS:

.teste{
 --progess:2000;
 height: 50px;
 padding: 5px;
 background-color: #ccc;
 display: flex
}
.teste::before{
content: "";
width: calc(var(--progess)*1%);
background-color: red
}

Javascript:

function update(){
var vida= document.getElementById("vida")
var value= vida.value
}

I already passed the input value pro JS, now I want to know how to define this value as value of the variable Progress in CSS Who can help me I would appreciate

Answer 1

You can use the method .setProperty(), which changes a property within a CSS style block:

function update(){
   var vida= document.getElementById("vida")
   var value= vida.value
   document.querySelector(".teste").style.setProperty('--progess', value);
}

.teste{
 --progess:5;
 height: 50px;
 padding: 5px;
 background-color: #ccc;
 display: flex
}
.teste::before{
content: "";
width: calc(var(--progess)*1%);
background-color: red
}

<div class="teste"></div>
<input id="vida" onchange="update()">