Permítanme comenzar diciendo que no tengo mucha experiencia en Javascript. Tengo una clase de CSS que se usa específicamente para mostrar/ocultar cosas con un clic de botón en mi sitio. Las barras de progreso se muestran de forma predeterminada, y sus diversos colores y estilos se muestran sin problema. Usando el siguiente código, el botón ocultará las barras de progreso correctamente.
function showhide() { var x = document.getElementsByClassName("showhideclass"); var i; for (i = 0; i < x.length; i ++) { if (x[i].style.display === "none") { x[i].style.display = "block"; } else { x[i].style.display = "none"; } } } Sin embargo, cuando se vuelve a hacer clic en el botón para mostrar las barras de progreso nuevamente, el color y otros estilos no aparecen. Sé que esto se debe a la línea x[i].style.display = "block"; pero no sé cómo guardar el estilo CSS como una variable en esta función para que se vuelva a aplicar al hacer clic en "Mostrar". Probé el siguiente código y aún ocultará las barras de progreso correctamente, pero no las volverá a mostrar con el segundo clic.
function showhide() { var x = document.getElementsByClassName("showhideclass"); var i; for (i = 0; i < x.length; i ++) { var elstyle = window.getComputedStyle(x[i]); if (x[i].style.display === "none") { x[i].style.display = elstyle; } else { x[i].style.display = "none"; } } }No estoy muy seguro de lo que me estoy perdiendo aquí, ¿alguien tiene sugerencias?
Tal vez quieras usar algo como esto.
Defina alguna clase css con una propiedad display: none y alterne la clase en los elementos mismos presionando un botón. Todas las propiedades como display: flex , display: block o display: none no se sobrescribirán.
function showhide() { const elements = document.getElementsByClassName("showhideclass"); [...elements].forEach(e => e.classList.toggle("hidden")); } .hidden { display: none; } <p class="showhideclass">1</p> <p class="showhideclass">2</p> <p class="showhideclass">3</p> <p class="showhideclass">4</p> <button onclick="showhide()">Toggle</button>@jns tenía razón. El siguiente código funciona perfectamente según lo previsto, y los estilos se guardan para cada barra de progreso a medida que se oculta y se muestra.
function showhide() { var x = document.getElementsByClassName("showhideclass"); var i; for (i = 0; i < x.length; i ++) { var elstyle = window.getComputedStyle(x[i]); if (x[i].style.display === "none") { x[i].style = elstyle; //x[i].style.display = "block"; } else { x[i].style.display = "none"; } } } Editar: el bot me gritó, así que explicaré más. Cambiando la línea x[i].style.display = elstyle; resolvió el problema; eliminar .display hace que esta línea aplique el estilo guardado COMO un estilo, en lugar de como la propiedad de visualización.