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