Tutoriales de Informática y Dispositivos Móviles
Tutoriales de Informática y Dispositivos Móviles
Comprobar si un elemento está oculto o visible con jQuery

Si un elemento está visible con jQuery

Comprobar si un elemento está visible con jQuery

En el siguiente tutorial aprenderemos varias formas de averiguar cuándo un elemento de la página está visible o oculto. Si un elemento está visible con jQuery

Utilizando una función de jQuery

Podemos utilizar la función is(«:visible»)

La función is(«:visible») devuelve true false dependiendo si el elemento sobre la que se aplica se está mostrando o no en la página.

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"); 
    } 
    // El 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>

Saber si el elemento está visible utilizando selectores

Método 1: Utilizando el selector :hidden

// Si el elemento con id=mensaje está visible 
if($("#mensaje:hidden") { 
   alert("El mensaje no está visible"); 
}
else{ 
  alert("El mensaje está visible"); 
} 

Método 2: Utilizando el selector :visible

// Si el elemento con id=mensaje está visible 
if($("#mensaje:visible") { 
   alert("El mensaje está visible");
}
else{ 
  alert("El mensaje no está visible");
}

Utilizando propiedades css

Otra forma de comprobarlo sería accediendo a las propiedades css del elemento como en el siguiente ejemplo

// 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");
}

Más tutoriales de jQuery

Deja 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 »
A %d blogueros les gusta esto: