Comprobar si un elemento está oculto o visible con jQuery

Comprobar si un elemento está oculto o visible con jQuery


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

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Translate »
Ir a la barra de herramientas