🕷️ Crawler Inspector

[Saltar al contenido](https://tutobasico.com/elemento-visible-oculto-jquery/#content) - [Inicio](https://tutobasico.com/) - [Tutoriales](https://tutobasico.com/tutoriales) - [Contacto](https://tutobasico.com/formulario/) - [Desconectarse](https://tutobasico.com/wp-login.php?action=logout&_wpnonce=cec9820b03) - [Identifícate](https://tutobasico.com/wp-login.php) - [Suscríbete](https://tutobasico.com/suscribete/) - [Atajos de teclado](https://tutobasico.com/shortcuts/) - [Descargo de responsabilidad de Afiliados](https://tutobasico.com/descargo-de-responsabilidad-de-afiliados/) [](https://tutobasico.com/) Tutoriales de Informática y Dispositivos Móviles - [Search](https://tutobasico.com/elemento-visible-oculto-jquery/) [](https://tutobasico.com/) Tutoriales de Informática y Dispositivos Móviles - [Search](https://tutobasico.com/elemento-visible-oculto-jquery/) - Menú - [Inicio](https://tutobasico.com/) - [Tutoriales](https://tutobasico.com/tutoriales) - [Contacto](https://tutobasico.com/formulario/) - [Desconectarse](https://tutobasico.com/wp-login.php?action=logout&_wpnonce=cec9820b03) - [Identifícate](https://tutobasico.com/wp-login.php) - [Suscríbete](https://tutobasico.com/suscribete/) - [Atajos de teclado](https://tutobasico.com/shortcuts/) - [Descargo de responsabilidad de Afiliados](https://tutobasico.com/descargo-de-responsabilidad-de-afiliados/)  [Inicio](https://tutobasico.com/ "Tutobásico") » [Tutoriales](https://tutobasico.com/tutoriales/ "Tutoriales") » [Programación](https://tutobasico.com/category/tutoriales-programacion/ "Programación") » [jQuery](https://tutobasico.com/category/tutoriales-programacion/tutoriales-jquery/ "jQuery") » Si un elemento está visible con jQuery [jQuery](https://tutobasico.com/category/tutoriales-programacion/tutoriales-jquery/ "Ver todas las entradas en jQuery") [Programación](https://tutobasico.com/category/tutoriales-programacion/ "Ver todas las entradas en Programación") # Si un elemento está visible con jQuery por [kamilore](https://tutobasico.com/author/admin/ "Ver todas las entradas de kamilore")\|Publicada [mayo 14, 2023](https://tutobasico.com/2023/05/14/ "12:42 am") ## 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](https://es.wikipedia.org/wiki/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](https://tutobasico.com/category/tutoriales-programacion/tutoriales-jquery/) ### Comparte esto: - [Haz clic para compartir en Facebook (Se abre en una ventana nueva) Facebook](https://tutobasico.com/elemento-visible-oculto-jquery/?share=facebook) - [Haz clic para compartir en X (Se abre en una ventana nueva) X](https://tutobasico.com/elemento-visible-oculto-jquery/?share=twitter) - [Haz clic para compartir en Pinterest (Se abre en una ventana nueva) Pinterest](https://tutobasico.com/elemento-visible-oculto-jquery/?share=pinterest) - [Más](https://tutobasico.com/elemento-visible-oculto-jquery/) - [Haz clic para compartir en LinkedIn (Se abre en una ventana nueva) LinkedIn](https://tutobasico.com/elemento-visible-oculto-jquery/?share=linkedin) ### Me gusta esto: Me gusta Cargando... ### *Relacionado* - [elemento](https://tutobasico.com/tag/elemento/ "Ver todas las entradas en elemento") - [jquery](https://tutobasico.com/tag/jquery/ "Ver todas las entradas en jquery") - [oculto](https://tutobasico.com/tag/oculto/ "Ver todas las entradas en oculto") - [visible](https://tutobasico.com/tag/visible/ "Ver todas las entradas en visible") #### Deja un comentario [Cancelar la respuesta](https://tutobasico.com/elemento-visible-oculto-jquery/#respond) Este sitio usa Akismet para reducir el spam. [Aprende cómo se procesan los datos de tus comentarios.](https://akismet.com/privacy/) ### Categorías - [Android](https://tutobasico.com/category/tutoriales-android/) - [Developers guide](https://tutobasico.com/category/developers-guide/) - [JavaScript](https://tutobasico.com/category/developers-guide/javascript/) - [jQuery](https://tutobasico.com/category/developers-guide/jquery/) - [Dispositivos móviles](https://tutobasico.com/category/tutoriales-dispositivos/) - [Android Wear](https://tutobasico.com/category/tutoriales-dispositivos/tutoriales-android-wear/) - [SmartWatch](https://tutobasico.com/category/tutoriales-dispositivos/smartwatch/) - [Empresa e Iniciativa Emprendedora](https://tutobasico.com/category/tutoriales-eie/) - [Formación y Orientación Laboral](https://tutobasico.com/category/formacion-y-orientacion-laboral/) - [FullCalendar](https://tutobasico.com/category/fullcalendar-2/) - [Informática](https://tutobasico.com/category/tutoriales-informatica/) - [Linux](https://tutobasico.com/category/tutoriales-linux/) - [macOS](https://tutobasico.com/category/tutoriales-macos/) - [Máquinas Virtuales](https://tutobasico.com/category/maquinas-virtuales/) - [Programación](https://tutobasico.com/category/tutoriales-programacion/) - [Angular](https://tutobasico.com/category/tutoriales-programacion/tutoriales-angular/) - [Bases de datos](https://tutobasico.com/category/tutoriales-programacion/tutoriales-bases-de-datos/) - [Bootstrap](https://tutobasico.com/category/tutoriales-programacion/tutoriales-bootstrap/) - [Entornos de desarrollo](https://tutobasico.com/category/tutoriales-programacion/entornos-de-desarrollo/) - [Git](https://tutobasico.com/category/tutoriales-programacion/tutoriales-git/) - [Html-Css](https://tutobasico.com/category/tutoriales-programacion/tutoriales-html-css/) - [Java](https://tutobasico.com/category/tutoriales-programacion/tutoriales-java/) - [JavaScript](https://tutobasico.com/category/tutoriales-programacion/tutoriales-javascript/) - [jQuery](https://tutobasico.com/category/tutoriales-programacion/tutoriales-jquery/) - [JTable](https://tutobasico.com/category/tutoriales-programacion/tutoriales-jtable/) - [NodeJs](https://tutobasico.com/category/tutoriales-programacion/tutoriales-nodejs/) - [Php](https://tutobasico.com/category/tutoriales-programacion/tutoriales-php/) - [Servidores](https://tutobasico.com/category/tutoriales-programacion/tutoriales-servidores/) - [Smarty](https://tutobasico.com/category/tutoriales-programacion/tutoriales-smarty/) - [Xml](https://tutobasico.com/category/tutoriales-programacion/tutoriales-de-xml/) - [Seo](https://tutobasico.com/category/tutoriales-seo/) - [Smart TV](https://tutobasico.com/category/smart-tv/) - [Windows](https://tutobasico.com/category/tutoriales-windows/) - [WordPress](https://tutobasico.com/category/tutoriales-wordpress/) ### Entradas recientes - [Seleccionar elemento por su texto con jQuery](https://tutobasico.com/seleccionar-elemento-texto-jquery/) septiembre 20, 2023 - [Buscar una coincidencia en un string con JavaScript](https://tutobasico.com/coincidencia-string-javascript/) mayo 27, 2023 - [Posición de un caracter en un string JavaScript](https://tutobasico.com/posicion-caracter-javascript/) mayo 27, 2023 - [Acceder a un caracter de una cadena con JavaScript](https://tutobasico.com/caracter-cadena-javascript/) mayo 27, 2023 - [Métodos de la clase String en JavaScript](https://tutobasico.com/clase-string-javascript/) mayo 27, 2023 ### Suscríbete al blog por correo electrónico Únete a otros 48 suscriptores ## Navegación de entradas - Entrada anterior [Cambiar la paginación de jTable](https://tutobasico.com/paginacion-jtable/) - [Volver a la lista de entradas](https://tutobasico.com/tutoriales/ "Volver a la lista de entradas") - Entrada siguiente [Instalar Git en Eclipse](https://tutobasico.com/git-eclipse/) Privacidad y cookies: este sitio utiliza cookies. Al continuar utilizando esta web, aceptas su uso. Para obtener más información, incluyendo cómo controlar las cookies, mira aquí: [Política de cookies](https://tutobasico.com/politica-de-cookies/) ##### Aplicación [](https://i0.wp.com/tutobasico.com/wp-content/uploads/2018/03/codeqr.jpg?ssl=1) QR aplicación tutobasico Descarga la aplicación Tutobásico para Android ##### Sígueme en Twitter [Mis tuits](https://twitter.com/CamiloRiobo) ##### Comentarios recientes - Matias en [Ejercicios de iniciación JavaScript 3](https://tutobasico.com/basicos-3-javascript/#comment-2474) - [kamilore](http://tutobasico.com/) en [Consultas de selección MySQL](https://tutobasico.com/consultas-seleccion-mysql/#comment-2457) - [instalar mysql](https://www.grupocodesi.com/blog/instalar-mysql.html) en [Consultas de selección MySQL](https://tutobasico.com/consultas-seleccion-mysql/#comment-2317) - [kamilore](http://tutobasico.com/) en [Instalar NodeJs y NPM en Windows 10](https://tutobasico.com/instalar-nodejs-y-npm/#comment-2027) - [kamilore](http://tutobasico.com/) en [Actualizar página con JavaScript](https://tutobasico.com/actualizar-javascript/#comment-2026) ##### Estadísticas del sitio - 1\.766.477 visitas ##### Translate: © 2026 [Tutobásico](https://tutobasico.com/ "Tutobásico") – Todos los derechos reservados Funciona con [WP](https://es.wordpress.org/ "Funciona con WordPress") – Diseñado con el [Tema Customizr](https://presscustomizr.com/customizr "Tema Customizr") Translate » %d

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](https://es.wikipedia.org/wiki/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](https://tutobasico.com/category/tutoriales-programacion/tutoriales-jquery/)