🕷️ Crawler Inspector

[](https://www.delftstack.com/es/) - [Tutorial](https://www.delftstack.com/es/tutorial/) - [How-To](https://www.delftstack.com/es/howto/) - [Referencia](https://www.delftstack.com/es/api/) - [es](https://www.delftstack.com/es/howto/jquery/how-to-check-if-an-element-is-hidden-in-jquery/) - [DE](https://www.delftstack.com/de/howto/jquery/how-to-check-if-an-element-is-hidden-in-jquery/) - [EN](https://www.delftstack.com/howto/jquery/how-to-check-if-an-element-is-hidden-in-jquery/) - [FR](https://www.delftstack.com/fr/howto/jquery/how-to-check-if-an-element-is-hidden-in-jquery/) - [IT](https://www.delftstack.com/it/howto/jquery/how-to-check-if-an-element-is-hidden-in-jquery/) - [JA](https://www.delftstack.com/ja/howto/jquery/how-to-check-if-an-element-is-hidden-in-jquery/) - [KO](https://www.delftstack.com/ko/howto/jquery/how-to-check-if-an-element-is-hidden-in-jquery/) - [PT](https://www.delftstack.com/pt/howto/jquery/how-to-check-if-an-element-is-hidden-in-jquery/) - [ZH](https://www.delftstack.com/zh/howto/jquery/how-to-check-if-an-element-is-hidden-in-jquery/) - [ZH-TW](https://www.delftstack.com/zh-tw/howto/jquery/how-to-check-if-an-element-is-hidden-in-jquery/) [Tutorial](https://www.delftstack.com/es/tutorial/) [Python 3 Basic](https://www.delftstack.com/es/tutorial/python-3-basic-tutorial/) [Tkinter](https://www.delftstack.com/es/tutorial/tkinter-tutorial/) [Python Modules](https://www.delftstack.com/es/tutorial/python-modules-tutorial/) [JavaScript](https://www.delftstack.com/es/tutorial/javascript/)[Python Numpy](https://www.delftstack.com/es/tutorial/python-numpy/)[Git](https://www.delftstack.com/es/tutorial/git/)[Matplotlib](https://www.delftstack.com/es/tutorial/matplotlib/)[PyQt5](https://www.delftstack.com/es/tutorial/pyqt5/)[Data Structure](https://www.delftstack.com/es/tutorial/data-structure/)[Algorithm](https://www.delftstack.com/es/tutorial/algorithm/) [HowTo](https://www.delftstack.com/es/howto/) [Python Scipy](https://www.delftstack.com/es/howto/python-scipy/)[Python Pygame](https://www.delftstack.com/es/howto/python-pygame/)[Python](https://www.delftstack.com/es/howto/python/)[Python Tkinter](https://www.delftstack.com/es/howto/python-tkinter/)[Batch](https://www.delftstack.com/es/howto/batch/)[PowerShell](https://www.delftstack.com/es/howto/powershell/)[Python Pandas](https://www.delftstack.com/es/howto/python-pandas/)[Numpy](https://www.delftstack.com/es/howto/numpy/)[Python Flask](https://www.delftstack.com/es/howto/python-flask/)[Django](https://www.delftstack.com/es/howto/django/)[Matplotlib](https://www.delftstack.com/es/howto/matplotlib/)[Docker](https://www.delftstack.com/es/howto/docker/)[Plotly](https://www.delftstack.com/es/howto/plotly/)[Seaborn](https://www.delftstack.com/es/howto/seaborn/)[Matlab](https://www.delftstack.com/es/howto/matlab/)[Linux](https://www.delftstack.com/es/howto/linux/)[Git](https://www.delftstack.com/es/howto/git/)[C](https://www.delftstack.com/es/howto/c/)[Cpp](https://www.delftstack.com/es/howto/cpp/)[HTML](https://www.delftstack.com/es/howto/html/)[JavaScript](https://www.delftstack.com/es/howto/javascript/)[jQuery](https://www.delftstack.com/es/howto/jquery/)[TensorFlow](https://www.delftstack.com/es/howto/tensorflow/)[TypeScript](https://www.delftstack.com/es/howto/typescript/)[Angular](https://www.delftstack.com/es/howto/angular/)[React](https://www.delftstack.com/es/howto/react/)[CSS](https://www.delftstack.com/es/howto/css/)[PHP](https://www.delftstack.com/es/howto/php/)[Java](https://www.delftstack.com/es/howto/java/)[Go](https://www.delftstack.com/es/howto/go/)[Kotlin](https://www.delftstack.com/es/howto/kotlin/)[Node.js](https://www.delftstack.com/es/howto/node.js/)[Csharp](https://www.delftstack.com/es/howto/csharp/)[Rust](https://www.delftstack.com/es/howto/rust/)[Ruby](https://www.delftstack.com/es/howto/ruby/)[Arduino](https://www.delftstack.com/es/howto/arduino/)[MySQL](https://www.delftstack.com/es/howto/mysql/)[MongoDB](https://www.delftstack.com/es/howto/mongodb/)[Postgres](https://www.delftstack.com/es/howto/postgres/)[SQLite](https://www.delftstack.com/es/howto/sqlite/)[R](https://www.delftstack.com/es/howto/r/)[VBA](https://www.delftstack.com/es/howto/vba/)[Scala](https://www.delftstack.com/es/howto/scala/)[Raspberry Pi](https://www.delftstack.com/es/howto/raspberry-pi/) [Referencia](https://www.delftstack.com/es/api/) [Python Pandas](https://www.delftstack.com/es/api/python-pandas/)[Numpy](https://www.delftstack.com/es/api/numpy/)[Scipy](https://www.delftstack.com/es/api/scipy/) # Cómo comprobar si un elemento está oculto en jQuery [Sundeep Dawadi](https://www.delftstack.com/es/author/sundeep-dawadi/) 30 enero 2023 [jQuery](https://www.delftstack.com/es/tags/jquery/) 1. [Método para comprobar si un elemento está oculto en jQuery](https://www.delftstack.com/es/howto/jquery/how-to-check-if-an-element-is-hidden-in-jquery/#m%C3%A9todo-para-comprobar-si-un-elemento-est%C3%A1-oculto-en-jquery) 2. [Comprende el selector `:hidden` en jQuery](https://www.delftstack.com/es/howto/jquery/how-to-check-if-an-element-is-hidden-in-jquery/#comprende-el-selector-hidden-en-jquery) 3. [Consejos rápidos para comprobar si un elemento está oculto](https://www.delftstack.com/es/howto/jquery/how-to-check-if-an-element-is-hidden-in-jquery/#consejos-r%C3%A1pidos-para-comprobar-si-un-elemento-est%C3%A1-oculto)  Cualquier objeto en DOM puede ser escondido asignando su propiedad CSS de `display` como `none`. ## Método para comprobar si un elemento está oculto en jQuery Primero, creamos un elemento de encabezado `<h1>` y aplicamos la propiedad CSS en línea para ocultarlo. ``` <h1 style="display:none;">Your text here</h1> ``` En jQuery hay dos filtros de visibilidad - los selectores `:hidden` y `:visible`. Especifican si el elemento está oculto y visible, respectivamente. Se puede comprobar fácilmente por el siguiente método. ``` <script> $(document).ready(function(){ //checks if document is ready if($("h1").is(":hidden")){ alert("The heading is hidden."); //your function here } if($("h1").is(":visible"){ alert("The heading is visible."); } }); </script> ``` Da una alerta que dice, `The heading is hidden.` Nota: Si coloca varios elementos con uno oculto y otro visible, se activan ambos `is(":visible")` y `is(":hidden")`. ## Comprende el selector `:hidden` en jQuery El selector `:hidden` identifica un elemento como oculto por las siguientes razones: 1. Tiene la propiedad `display` de CSS con un valor de `none`. 2. El elemento es un elemento de forma con `type="hidden"`. 3. Los valores `height` y `width` del elemento se establecen explícitamente en 0. 4. El elemento padre está oculto. Por lo tanto, los elementos con la propiedad `visibility` de CSS establecida como `hidden` o la propiedad `opacity` como `0` se consideran visibles en jQuery ya que todavía consumen espacio en el DOM. Alternativamente, para comprobar la propiedad CSS específica del elemento para comprobar si está oculto, podemos usar el siguiente método. ``` <script> if ( $(h1).css('display') == 'none' || $(h1).css('opacity') == '0'){ alert("The heading is hidden."); //your function here } </script> ``` ## Consejos rápidos para comprobar si un elemento está oculto jQuery no puede aprovechar el método nativo DOM `querySelectorAll()`. También crea algunos problemas de rendimiento ya que obliga al navegador a volver a mostrar la página para determinar la visibilidad. Así que en lugar de usar elementos, puedes usar clases o selectores CSS y luego usar `.find(":hidden")`. ``` <h1 style="display:none;">Your text here</h1> <script> $(document).ready(function(){ var hiddenHeadings = $("body").find(":hidden").is("h1"); if(hiddenHeadings.length > 0){ alert("There is atleast one heading hidden."); } }); </script> ``` Aquí se puede acceder directamente a los `hiddenHeadings` y se puede operar sobre ellos. ¿Disfrutas de nuestros tutoriales? Suscríbete a DelftStack en YouTube para apoyarnos en la creación de más guías en vídeo de alta calidad. [Suscríbete](https://www.youtube.com/@delftstack/?sub_confirmation=1) Copyright © 2025. All right reserved - [Acerca de nosotros](https://www.delftstack.com/es/about-us/) - [Política de privacidad](https://www.delftstack.com/es/privacy-policy/) - [Contacto](https://www.delftstack.com/es/contact/)

1. [Método para comprobar si un elemento está oculto en jQuery](https://www.delftstack.com/es/howto/jquery/how-to-check-if-an-element-is-hidden-in-jquery/#m%C3%A9todo-para-comprobar-si-un-elemento-est%C3%A1-oculto-en-jquery) 2. [Comprende el selector `:hidden` en jQuery](https://www.delftstack.com/es/howto/jquery/how-to-check-if-an-element-is-hidden-in-jquery/#comprende-el-selector-hidden-en-jquery) 3. [Consejos rápidos para comprobar si un elemento está oculto](https://www.delftstack.com/es/howto/jquery/how-to-check-if-an-element-is-hidden-in-jquery/#consejos-r%C3%A1pidos-para-comprobar-si-un-elemento-est%C3%A1-oculto)  Cualquier objeto en DOM puede ser escondido asignando su propiedad CSS de `display` como `none`. ## Método para comprobar si un elemento está oculto en jQuery Primero, creamos un elemento de encabezado `<h1>` y aplicamos la propiedad CSS en línea para ocultarlo. ``` <h1 style="display:none;">Your text here</h1> ``` En jQuery hay dos filtros de visibilidad - los selectores `:hidden` y `:visible`. Especifican si el elemento está oculto y visible, respectivamente. Se puede comprobar fácilmente por el siguiente método. ``` <script> $(document).ready(function(){ //checks if document is ready if($("h1").is(":hidden")){ alert("The heading is hidden."); //your function here } if($("h1").is(":visible"){ alert("The heading is visible."); } }); </script> ``` Da una alerta que dice, `The heading is hidden.` Nota: Si coloca varios elementos con uno oculto y otro visible, se activan ambos `is(":visible")` y `is(":hidden")`. El selector `:hidden` identifica un elemento como oculto por las siguientes razones: 1. Tiene la propiedad `display` de CSS con un valor de `none`. 2. El elemento es un elemento de forma con `type="hidden"`. 3. Los valores `height` y `width` del elemento se establecen explícitamente en 0. 4. El elemento padre está oculto. Por lo tanto, los elementos con la propiedad `visibility` de CSS establecida como `hidden` o la propiedad `opacity` como `0` se consideran visibles en jQuery ya que todavía consumen espacio en el DOM. Alternativamente, para comprobar la propiedad CSS específica del elemento para comprobar si está oculto, podemos usar el siguiente método. ``` <script> if ( $(h1).css('display') == 'none' || $(h1).css('opacity') == '0'){ alert("The heading is hidden."); //your function here } </script> ``` ## Consejos rápidos para comprobar si un elemento está oculto jQuery no puede aprovechar el método nativo DOM `querySelectorAll()`. También crea algunos problemas de rendimiento ya que obliga al navegador a volver a mostrar la página para determinar la visibilidad. Así que en lugar de usar elementos, puedes usar clases o selectores CSS y luego usar `.find(":hidden")`. ``` <h1 style="display:none;">Your text here</h1> <script> $(document).ready(function(){ var hiddenHeadings = $("body").find(":hidden").is("h1"); if(hiddenHeadings.length > 0){ alert("There is atleast one heading hidden."); } }); </script> ``` Aquí se puede acceder directamente a los `hiddenHeadings` y se puede operar sobre ellos. ¿Disfrutas de nuestros tutoriales? Suscríbete a DelftStack en YouTube para apoyarnos en la creación de más guías en vídeo de alta calidad. [Suscríbete](https://www.youtube.com/@delftstack/?sub_confirmation=1)