JavaScript: compruebe si el elemento está oculto con jQuery

Un elemento en HTML se puede ocultar a través de diferentes propiedades, atributos y configuraciones de CSS. En este artículo, usaremos jQuery para determinar si un elemento está oculto.

Introducción

En este artículo, veremos cómo verificar si un elemento está oculto con JQuery. Estas son las formas más comunes de verificar la visibilidad de un elemento:

1
2
3
4
5
console.log($(myElement).is(":hidden")) 
console.log($(myElement).is(":visible")) 
console.log($(myElement).css("visibility") === "hidden") 
console.log($(myElement).css("display") === "none") 
console.log($(myElement).css("opacity") <= "0") 

"¿Por qué hay tantas formas de comprobar la visibilidad?"

¡Múltiples factores pueden desempeñar un papel en la visibilidad de un elemento! Cubriremos cada caso y consideraremos cuándo es conveniente usarlos. Sin embargo, primero, configuremos nuestro entorno de prueba.

Configuración del entorno

Para este tutorial, usaremos jQuery Core, versión 3.6.0. Puede obtener la última CDN desde Sitio web oficial de jQuery.

Comencemos por crear un archivo index.html con el código repetitivo que tienen la mayoría de las páginas, y agreguemos un elemento <p> con una clase llamada first-element al <cuerpo>:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <title>Document</title>
</head>

<body>
    <p class="first-element" >This is the first paragraph.</p>
</body>

</html>

¡Ahora ocultemos este párrafo, para que podamos probar su visibilidad con .is(":hidden")! Para ocultar el ‘primer elemento’, simplemente podemos agregarle el atributo ‘oculto’:

1
<p class="first-element" hidden>This is the first paragraph</p>

Nota: Vuelva a cargar la página y confirme que el primer elemento ya no está visible.

Comprobar si el elemento está oculto con .is(":hidden")

Para usar .is(":hidden") puede crear etiquetas <script></script> y agregar su código JavaScript dentro de ellas, o usar la herramienta Consola de su navegador para ejecutar el código directamente. Elija lo que desee, no afectará el resultado.

De cualquier manera, puede leer el resultado desde la pestaña Consola (presionando F12 o Ctrl + Shift + I para la mayoría de los navegadores). Como alternativa, puede hacer clic con el botón derecho en la página y seleccionar "Inspeccionar" en el menú. En Firefox es "Inspeccionar elemento".

.is(":hidden") devolverá true si el elemento seleccionado está oculto. Si no está oculto, devolverá falso.

Usemos este método en nuestro .first-element oculto:

1
2
var myElement = ".first-element";
console.log(myElement + " is hidden?: " + $(myElement).is(":hidden"));

Si revisa la pestaña Consola de su navegador, debería ver el siguiente resultado:

1
.first-element is hidden?: true

Bastante simple, ¿verdad? Podemos usar el siguiente método is(":visible") para verificar nuestro resultado actual.

Comprobar si el elemento está oculto con is(":visible")

is(":visible") probará la visibilidad de un elemento y devolverá verdadero si el elemento seleccionado está visible, o devolverá falso si está oculto.

Como habrás notado, es el opuesto directo del método .is(":hidden"). Esto significa que ninguno de los dos puede devolver el mismo valor para el mismo elemento. No al mismo tiempo al menos.

Probémoslo en el primer elemento y observemos el resultado:

1
2
var myElement = ".first-element";
console.log(myElement + " is visible?: " + $(myElement).is(":visible"));

Como se esperaba, generará un valor falso:

1
.first-element is visible?: false

Tenga en cuenta que también obtendrá los mismos resultados al trabajar con las entradas ocultas:

1
<input type="hidden" class="inp-element" value="3487">

Aunque el parámetro oculto pasó a nuestro elemento input a través del atributo type, todavía produce el mismo resultado.

Hasta aquí todo bien. Ahora, llevemos nuestro juego un paso adelante y veamos cómo probar la visibilidad que ha sido modificada por el CSS.

Comprobar si el elemento está oculto con .css("visibility")

Agreguemos dos elementos más a nuestro DOM:

1
2
<p class="second-element">This is the second paragraph.</p>
<p class="third-element">This is the third paragraph.</p>

Actualice/recargue su página y confirme que se agregan nuevos elementos.

Ahora cambiaremos la propiedad visibilidad del segundo elemento. Para hacerlo, puede crear un archivo CSS y vincularlo a su archivo HTML o escribir su código CSS dentro de la etiqueta <head> de su archivo HTML, dentro de las etiquetas <style></style>:

1
2
3
.second-element{
    visibility: hidden; 
}

Ahora bien, esta parte es un poco complicada. Antes de volver a cargar la página, observe detenidamente la posición actual del tercer elemento. Si actualiza la página, notará que el segundo elemento ya no está visible, pero aún ocupa el mismo espacio. No es visible, pero la posición del ’tercer elemento’ implica que todavía está allí. De hecho, si seguimos adelante y ejecutamos nuestras funciones anteriores para este elemento:

1
2
3
var myElement = ".second-element";
console.log(myElement + " is hidden?: " + $(myElement).is(":hidden"));
console.log(myElement + " is visible?: " + $(myElement).is(":visible"));

Obtendríamos el resultado de que no está oculto, pero sigue siendo visible:

1
2
.second-element is hidden?: false
.second-element is visible?: true

La razón es que cuando estableces la propiedad visibilidad en oculto, se vuelve invisible pero el navegador aún la procesa, por lo que ocupa su espacio inicial. La mayoría de los navegadores consideran elementos visibles si tienen “alto” y/o “ancho”. En otras palabras, cualquier elemento con dimensiones cero se considera oculto.

Ahora que sabemos a lo que nos enfrentamos, todo lo que tenemos que hacer es verificar si la propiedad visibilidad del elemento está configurada como oculta, no si el elemento en sí está oculto:

1
2
var myElement = ".second-element";
console.log(myElement + " is visibility === hidden?: " + ($(myElement).css("visibility") === "hidden"));

Esto devolverá verdadero:

1
.second-element is visibility === hidden?: true

Mientras estamos en eso, averigüemos qué otras propiedades de CSS afectan la visibilidad.

Comprobar si el elemento está oculto con .css("display")

Otra propiedad de CSS que se usa comúnmente para ocultar elementos es display. Ya tenemos nuestro tercer elemento listo en nuestro DOM. Así que todo lo que tenemos que hacer es configurar su display a none:

1
2
3
.third-element {
    display: none; 
}

Al actualizar la página, puede ver que ya no está visible.

Ahora, lo bueno de display: none; es que podemos seleccionarlo correctamente usando nuestros métodos anteriores is(":hidden") y is(":visible"):

1
2
3
var myElement = ".third-element";
console.log(myElement + " is hidden?: " + $(myElement).is(":hidden"));
console.log(myElement + " is visible?: " + $(myElement).is(":visible"));

Dado que el navegador no representa el tercer elemento, obtenemos los resultados esperados:

1
2
.third-element is hidden?: true
.third-element is visible?: false

También podemos seleccionarlo usando el selector .css():

1
2
var myElement = ".third-element";
console.log(myElement + " is css.display == none?: " + ($(myElement).css("display") === "none"));

Y como resultado obtendríamos el siguiente resultado:

1
.third-element is css.display == none?: true

Otra forma de hacer que un elemento sea invisible es establecer su opacidad en cero. En la siguiente sección, crearemos un nuevo elemento, cambiaremos su opacidad y comprobaremos si es visible o no.

Comprobar si el elemento está oculto con .css("opacity")

Hacer que un elemento sea invisible a través de la opacidad se comporta de manera similar a establecer la propiedad visibilidad en oculto. Por ello, añadiremos dos elementos más para observar mejor el cambio:

1
2
<p class="fourth-element">This is the fourth paragraph.</p>
<p class="visible-element">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis corrupti inventore, et beatae accusantium perferendis?</p>

Ahora agreguemos algo de relleno para enfatizar el espacio ocupado por el cuarto elemento, y también fijemos su opacidad a cero:

1
2
3
4
.fourth-element {
    padding: 30px;
    opacity: 0;
}

Al actualizar la página, notará la ausencia del cuarto elemento. Tiene dimensiones, por lo que está renderizado, pero no es opaco, por lo que no es visible.

Entonces, naturalmente, todos los siguientes métodos:

1
2
3
4
var myElement = ".fourth-element";
console.log(myElement + " is hidden?: " + $(myElement).is(":hidden"));
console.log(myElement + " is visibility === hidden?: " + ($(myElement).css("visibility") === "hidden"));
console.log(myElement + " is css.display == none?: " + ($(myElement).css("display") === "none"));

Devolverá falso:

1
2
3
.fourth-element is hidden?: false
.fourth-element is visibility === hidden?: false
.fourth-element is css.display == none?: false

La única forma de atrapar este elemento invisible es usar el selector .css("opacity"):

1
2
var myElement = ".fourth-element";
console.log(myElement + " is opacity lesser than or equal to 0?: " + ($(myElement).css("opacity") <= "0"));

Esto devuelve verdadero:

1
.fourth-element is opacity lesser than or equal to 0?: true

¡Y esto concluye nuestro tutorial sobre cómo verificar si un elemento está oculto con jQuery!

Conclusión

En este tutorial, aprendimos cómo verificar la visibilidad de un elemento usando los selectores de jQuery. Mientras que los selectores .is(":hidden"), is(":visible") y .css("display") son buenas opciones para seleccionar los elementos no renderizados, .css(" visibilidad") y .css("opacity") son los mejores ajustes para los elementos que se representan pero que no son visibles para los ojos humanos.