1

Quiero cambiar el valor de una propiedad de una clase css dinamicamente con javaScript

Por ejemplo teniendo:

$(".miClase").css("visibility", "visible");
.miClase {
  visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="miClase">hola</p>

2
  • 1
    Ahí no se está cambiando la clase, se está asignando un valor a una propiedad de CSS. ¿qué es lo que deseas hacer entonces?
    – Shaz
    Commented el 17 dic. 2018 a las 16:28
  • Ya corregí el enunciado gracias !
    – Popularfan
    Commented el 18 dic. 2018 a las 1:01

3 respuestas 3

2

Podrías probar con usar:

var elems = document.getElementsByClassName('miClase');
for(var i = 0; i < elems.length; i++)
{
    elems[i].style.visibility = "visible";
}
1
  • Correcto, gracias!
    – Popularfan
    Commented el 18 dic. 2018 a las 1:03
2

Para cambiar estilos, que es lo que buscas, es de la siguiente manera:

document.getElementById(id).style.property = new style

Ejemplo

document.getElementById("idElemento").style.visibility= "visible";

Ejemplo en tu caso:

document.getElementsByClassName("miClase").style.visibility= "visible";
5
  • No entiendo quien votó positivo a esta respuesta, pero no está respondiendo correctamente según lo que plantea el OP.
    – Shaz
    Commented el 17 dic. 2018 a las 17:44
  • El dijo una clase, pero con el ejemplo que dio con JQuery se refería a cambiar un estilo. Así que si esta correcto, o me puedes decir en que pide ayuda? Digo, a lo mejor estoy entendiendo mal. Commented el 17 dic. 2018 a las 21:41
  • Se está cambiando el valor de una propiedad a una clase, no a un id, son selectores distintos.
    – Shaz
    Commented el 17 dic. 2018 a las 22:50
  • vale, solo era cambiar una cosa, listo Commented el 17 dic. 2018 a las 23:30
  • getElementsByClassName no trae un arreglo ? Commented el 8 mar. 2021 a las 14:40
1

En el caso en el cual quieres cambiar la visibilidad del primer elemento cuya clase es miClase puedes optar para una de estas soluciones:

  1. document.querySelector(".miClase").style.visibility = "visible";
    
  2. document.querySelectorAll(".miClase")[0].style.visibility = "visible";
    
  3. getElementsByClassName('miClase')[0].style.visibility = "visible";
    

Si por de otra parte quieres cambiar la visibilidad de todos los elementos cuya clase es miClase puedes hacer lo que sugirió @GermánMartínez o puedes utilizar de la misma manera querySelectorAll.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.