Comprobar si un elemento está oculto o visible con jQuery
En este tutorial aprenderemos varias formas para averiguar si un elemento está visible o no en la página utilizando jQuery.
Método is(«:visible»)
La función .is(«:visible») devuelve true si el elemento está visible en la página y por el contrario devuelve false.
Veamos un ejemplo
<!-- Elemento de la página -->
<div id="mensaje">
<p>Texto del mensaje</p>
</div>
<script>
//Si el elemento con id=mensaje está visible
if($("#mensaje").is(":visible") {
alert("El mensaje está visible");
}else{
alert("El mensaje no está visible");
}
//En resultado es que el mensaje está visible
</script>
Veamos que ocurre si ocultamos el elemento
<!-- Elemento de la página -->
<div id="mensaje">
<p>Texto del mensaje</p>
</div>
<script>
//Ocultamos el elemento con la función hide()
$("#mensaje").hide();
//Volvemos a comprobar
if($("#mensaje").is(":visible") {
alert("El mensaje está visible");
}else{
alert("El mensaje no está visible");
}
//El resultado es que el mensaje no está visible
</script>
Otras formas de comprobar si el elemento está visible
Ejemplo 1
<script>
//Si el elemento con id=mensaje está visible
if($("#mensaje:hidden") {
alert("El mensaje no está visible");
}else{
alert("El mensaje está visible");
}
</script>
Ejemplo 2
<script>
//Si el elemento con id=mensaje está visible
if($("#mensaje:visible") {
alert("El mensaje está visible");
}else{
alert("El mensaje no está visible");
}
</script>
Ejemplo 3
<script>
//Si el elemento con id=mensaje está visible
if($("#mensaje").css("display") !== "none") {
alert("El mensaje está visible");
}else{
alert("El mensaje no está visible");
}
</script>
Si te ha gustado no olvides compartir en redes sociales.
Espero que te haya servido. Cualquier duda deja un comentario. Un saludo