¡Tengo una pequeña pregunta! Estoy tratando de cambiar la propiedad de ancho de css usando JavaScript de esta manera:
document.getElementById("progressvalue").style.width = "80%";
.progress { width: 100%; max-width: 500px; border: 3px solid black; height: 20px; padding: 1px; } #progressvalue { height: 100%; width: 0%; background-color: #05e35e; }
<div class="progress"> <div id="progressvalue"></div> </div>
Pero en lugar del 80 % en el código JavaScript, quiero aumentar el valor del ancho en un 20 %. Me gusta (ancho = ancho + 20%) Quiero aplicar este cambio una vez (para poder usarlo varias veces usando otras condiciones), y es por eso que lo necesito así (ancho = ancho + 20%)
Puede intentar leer la propiedad style.width
del elemento, manteniendo solo la parte numérica y agregándola a su paso (por ejemplo, 20%).
const step = 5; const updateProgress = () => { const currentWidth = Number(document.getElementById("progressvalue").style.width.replace( "%", "")); if (currentWidth>=100) { return; } else { document.getElementById("progressvalue").style.width = `${currentWidth+step}%`; } }
Puedes comprobarlo en este CodePen .
Puedes probarlo
//offsetWidth : returns the width of the element var element_width=document.getElementById("progressvalue").offsetWidth document.getElementById("progressvalue").style.width =element_width + (20*element_width/100) +'px' ;
Supongo que quieres hacer algo de animación, ¿verdad? Si es así, puede usar la recursividad con setTimeout:
function progress(val) { val += 20; document.getElementById("progressvalue").style.width = val + "%"; if (val < 100) // To stop the loop when progress bar is full setTimeout(function () { progress(val); }, 1000) } progress(0); // Start the animation