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