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