¿Cómo comprobar si un elemento está oculto en jQuery?

Puede cambiar la visibilidad de los elementos utilizando las .hide() , .show() o .toggle() .

¿Cómo probarías si un artículo es visible u oculto?

6967
07 окт. Philip Morton preguntó 07 oct. 2008-10-07 16:03 '08 a las 4:03 pm 2008-10-07 16:03
@ 56 respuestas
  • 1
  • 2

Como la pregunta se relaciona con un elemento, este código puede ser más apropiado:

 // Checks css for display:[none|block], ignores visibility:[true|false] $(element).is(":visible"); // The same works with hidden $(element).is(":hidden"); 

Lo mismo que la propuesta Twenty , pero aplicado a un solo elemento; y esto corresponde al algoritmo recomendado en las preguntas frecuentes de jQuery.

8594
07 окт. respuesta se da Tsvetomir Tsonev 07 oct. 2008-10-07 16:30 '08 a las 4:30 pm 2008-10-07 16:30

Puedes usar el selector hidden :

 // Matches all elements that are hidden $('element:hidden') 
border=0

Y selector visible :

 // Matches all elements that are visible $('element:visible') 
1318
07 окт. respuesta dada twernt 07 oct 2008-10-07 16:16 '08 a las 4:16 pm 2008-10-07 16:16
 if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){ // element is hidden } 

El método anterior no tiene en cuenta la visibilidad del padre. Para ver un padre, debe usar .is(":hidden") o .is(":visible") .

Por ejemplo

 <div id="div1" style="display:none"> <div id="div2" style="display:block">Div2</div> </div> 

El método anterior tratará div2 visible, y :visible no. Pero lo anterior puede ser útil en muchos casos, especialmente cuando necesita averiguar si hay algún error div visible en el elemento padre oculto, porque en estas condiciones :visible no funcionará.

831
07 окт. Respuesta dada a Mote el 7 de octubre. 2008-10-07 16:09 '08 a las 4:09 pm 2008-10-07 16:09

Ninguna de estas respuestas tiene que ver con lo que entiendo, y esta es la pregunta que buscaba: "¿Cómo proceso los elementos con visibility: hidden ?". Ni :visible , ni :hidden no manejará esto, ya que ambos buscan la asignación en la documentación. Por lo que puedo decir, no hay ningún selector para manejar la visibilidad de CSS. Así es como lo resolví (los selectores de jQuery estándar, quizás una sintaxis más concisa):

 $(".item").each(function() { if ($(this).css("visibility") == "hidden") { // handle non visible state } else { // handle visible state } }); 
474
24 марта '11 в 21:44 2011-03-24 21:44 la respuesta la da aaronLile el 24 de marzo de 2011 a las 21:44 2011-03-24 21:44

¿Cómo determinar el estado del elemento cambiado?


Puede determinar si un elemento está compilado o no utilizando los selectores :visible y :hidden .

 var isVisible = $('#myDiv').is(':visible'); var isHidden = $('#myDiv').is(':hidden'); 

Si simplemente actúa sobre un elemento basado en su apariencia, puede simplemente incluir :visible o :hidden en la expresión de selección. Por ejemplo:

  $('#myDiv:visible').animate({left: '+=200px'}, 'slow'); 
343
14 янв. la respuesta la da el usuario 574889 14 de enero 2011-01-14 00:13 '11 a las 0:13 2011-01-14 00:13

A menudo, al verificar si algo es visible o no, inmediatamente irá hacia adelante y hará algo más con él. La cadena jQuery lo hace fácil.

Por lo tanto, si tiene un selector y desea realizar alguna acción en él, solo si está visible u oculto, puede usar el filter(":visible") o el filter(":hidden") , y luego vincularlo a Acción que quieres tomar.

Así que en lugar de una if , por ejemplo:

 if ($('#btnUpdate').is(":visible")) { $('#btnUpdate').animate({ width: "toggle" }); // Hide button } 

O más efectivo, pero aún más feo:

 var button = $('#btnUpdate'); if (button.is(":visible")) { button.animate({ width: "toggle" }); // Hide button } 

Puedes hacerlo todo en una línea:

 $('#btnUpdate').filter(":visible").animate({ width: "toggle" }); 
253
25 июля '09 в 13:21 2009-07-25 13:21 la respuesta se da Simon_Weaver 25 de julio de 2009 a las 13:21 2009-07-25 13:21

Selector :visible según la documentación de jQuery :

  • Tienen un valor CSS que none display none .
  • Estos son elementos de formulario con type="hidden" .
  • Su anchura y altura están claramente establecidas en 0.
  • El elemento principal está oculto, por lo que el elemento no se muestra en la página.

Los elementos con visibility: hidden o opacity: 0 se consideran visibles, ya que todavía consumen espacio en el diseño.

Esto es útil en algunos casos e inútil para otros, porque si desea verificar si un elemento está visible ( display != none ), ignorando la visibilidad de los elementos principales, encontrará que ejecutando .css("display") == 'none' ocurre no solo más rápido, sino que también devuelve la exactitud de la visibilidad.

Si desea verificar la visibilidad en lugar de la pantalla, debe usar: .css("visibility") == "hidden" .

También tenga en cuenta las notas adicionales de jQuery :

Como :visible es una extensión de jQuery, y no es parte de la especificación CSS, las consultas que usan :visible no pueden aprovechar las mejoras de rendimiento proporcionadas por el método DOM querySelectorAll() . Para obtener el mejor rendimiento al usar :visible para seleccionar elementos, primero seleccione los elementos usando el selector de CSS puro, luego use .filter(":visible") .

Además, si le preocupa el rendimiento, debería verificar ahora que me ve ... mostrar / ocultar rendimiento (2010-05-04) y usar otros métodos para mostrar y ocultar elementos.

206
25 нояб. La respuesta es dada por Pedro Rainho el 25 de noviembre. 2011-11-25 12:16 '11 a las 12:16 2011-11-25 12:16

Funciona para mí, y uso show() y hide() para hacer que mi div esté oculto / visible:

 if( $(this).css('display') == 'none' ){  } else {  } 
187
06 июля '11 в 23:19 2011-07-06 23:19 Abiy dio la respuesta el 6 de julio de 2011 a las 23:19 2011-07-06 23:19

Cómo funcionan los elementos de visibilidad y jQuery.

El elemento se puede ocultar usando display:none , visibility:hidden u opacity:0 . La diferencia entre estos métodos:

  • display:none oculta el elemento y no ocupa ningún espacio;
  • visibility:hidden oculta el elemento, pero aún ocupa espacio en el diseño;
  • opacity:0 oculta el elemento como "visible: oculto", y aún ocupa espacio en el diseño; la única diferencia es que la opacidad permite que el elemento sea parcialmente transparente;

     if ($('.target').is(':hidden')) { $('.target').show(); } else { $('.target').hide(); } if ($('.target').is(':visible')) { $('.target').hide(); } else { $('.target').show(); } if ($('.target-visibility').css('visibility') == 'hidden') { $('.target-visibility').css({ visibility: "visible", display: "" }); } else { $('.target-visibility').css({ visibility: "hidden", display: "" }); } if ($('.target-visibility').css('opacity') == "0") { $('.target-visibility').css({ opacity: "1", display: "" }); } else { $('.target-visibility').css({ opacity: "0", display: "" }); } 

    Métodos útiles para cambiar jQuery:

     $('.click').click(function() { $('.target').toggle(); }); $('.click').click(function() { $('.target').slideToggle(); }); $('.click').click(function() { $('.target').fadeToggle(); }); 
181
25 апр. la respuesta es dada por webvitaly 25 de abril 2012-04-25 00:04 '12 a las 12:04 AM 2012-04-25 00:04

Yo usaría la clase CSS .hide { display: none!important; } .hide { display: none!important; } .

Para ocultar / mostrar, llamo a .addClass("hide")/.removeClass("hide") . Para verificar la visibilidad, uso .hasClass("hide") .

Esta es una forma simple y directa de verificar / ocultar / mostrar elementos si no planea usar los métodos .toggle() o .animate() .

145
03 февр. Respuesta dada por Evgeny Levin 03 feb. 2012-02-03 19:04 '12 a las 19:04 2012-02-03 19:04

También puedes hacer esto usando javascript simple:

 function isRendered(domObj) { if ((domObj.nodeType != 1) || (domObj == document.body)) { return true; } if (domObj.currentStyle  domObj.currentStyle["display"] != "none"  domObj.currentStyle["visibility"] != "hidden") { return isRendered(domObj.parentNode); } else if (window.getComputedStyle) { var cs = document.defaultView.getComputedStyle(domObj, null); if (cs.getPropertyValue("display") != "none"  cs.getPropertyValue("visibility") != "hidden") { return isRendered(domObj.parentNode); } } return false; } 

Notas:

  • Funciona en todas partes

  • Trabajos para elementos anidados

  • Funciona para CSS y estilos en línea.

  • No se requiere marco

140
16 июля '12 в 22:18 2012-07-16 22:18 Matt Brock dio la respuesta el 16 de julio de '12 a las 10:18 pm 2012-07-16 22:18

Simplemente puede usar el atributo hidden o visible , por ejemplo:

 $('element:hidden') $('element:visible') 

O puede simplificar lo mismo con lo siguiente.

 $(element).is(":visible") 
120
23 мая '12 в 15:59 2012-05-23 15:59 La respuesta se da en ScoRpion el 23 de mayo de 2012 a las 3:59 pm 2012-05-23 15:59

Otra respuesta que debe tener en cuenta: si oculta un elemento, debe usar jQuery , pero en lugar de ocultarlo, borra todo el elemento, pero copia su HTML y la etiqueta en la variable jQuery, y luego lo que debe hacer es realizar una prueba si hay una etiqueta de este tipo en la pantalla, utilizando el habitual if (!$('#thetagname').length) .

110
22 апр. La respuesta está dada por think123 22 de abril. 2012-04-22 02:40 '12 a las 2:40 2012-04-22 02:40

Enlace demo

Fuente:

Blogger Plug n Play - Herramientas y widgets de jQuery: cómo saber si un elemento está oculto o visible usando jQuery

105
25 янв. La respuesta es Code Spy 25 de enero 2013-01-25 08:34 '13 a las 8:34 2013-01-25 08:34

ebdiv debe establecer en style="display:none;" Esto funciona tanto para mostrar como para esconder:

 $(document).ready(function(){ $("#eb").click(function(){ $("#ebdiv").toggle(); }); }); 
103
13 июня '12 в 16:20 2012-06-13 16:20 Vaishu da la respuesta el 13 de junio de 2012 a las 4:20 p. 2012-06-13 16:20

Al probar un elemento con un selector :hidden en jQuery, se debe tener en cuenta que un elemento con una ubicación absoluta puede reconocerse como oculto, aunque sus elementos secundarios son visibles .

Al principio, esto parece un poco contradictorio, aunque una mirada más detallada a la documentación de jQuery proporciona información relevante:

Los elementos pueden considerarse ocultos por varias razones: [...] su ancho y alto están claramente establecidos en 0. [...]

Así que realmente tiene sentido con respecto al modelo de caja y el estilo calculado para el elemento. Incluso si el ancho y la altura no se establecen explícitamente en 0, se pueden establecer de forma implícita.

Mira el siguiente ejemplo:

 .foo { position: absolute; left: 10px; top: 10px; background: #ff0000; } .bar { position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; background: #0000ff; } 
http://jsfiddle.net/pM2q3/7/ 

El mismo JS tendrá esta salida:

 console.log($('.foo').is(':hidden')); // false console.log($('.bar').is(':hidden')); // false 
85
06 мая '14 в 13:50 2014-05-06 13:50 se da la respuesta conceptdeluxe 06 de mayo de 2014 a las 13:50 2014-05-06 13:50

Puede funcionar:

 expect($("#message_div").css("display")).toBe("none"); 
82
20 июля '12 в 15:44 2012-07-20 15:44 la respuesta la da Maneesh Kumar el 20 de julio de 2012 a las 15:44 2012-07-20 15:44

Ejemplo:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="checkme" class="product" style="display:none"> <span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish <br>Product: Salmon Atlantic <br>Specie: Salmo salar <br>Form: Steaks </div> 
62
28 окт. respuesta dada por Irfan DANISH 28 de octubre 2013-10-28 09:43 '13 a las 9:43 2013-10-28 09:43

Para comprobar si esto no es visible, lo uso ! :

 if ( !$('#book').is(':visible')) { alert('#book is not visible') } 

O lo siguiente: sam, manteniendo el selector jQuery en una variable para tener un mejor rendimiento cuando lo necesite varias veces:

 var $book = $('#book') if(!$book.is(':visible')) { alert('#book is not visible') } 
61
04 июня '13 в 16:42 2013-06-04 16:42 Matthias Wegtun dio la respuesta el 4 de junio de 2013 a las 4:42 2013-06-04 16:42

Usa el cambio de clase, no la edición de estilo.

Usar clases diseñadas para "ocultar" elementos es simple, así como uno de los métodos más efectivos. Cambiar la clase 'oculto' con el tipo de Display 'ninguno' será más rápido que editar este estilo directamente. Expliqué en detalle algunas de estas preguntas en la pregunta de Rotación de dos elementos visibles / ocultos en el mismo div .


Recomendaciones y optimización de JavaScript

Aquí hay un video realmente instructivo en Google Tech Talk del ingeniero jefe de Google, Nicholas Zakas:

59
19 июля '13 в 0:17 2013-07-19 00:17 la respuesta se da Lopsided July 19, '13 at 0:17 2013-07-19 00:17

Un ejemplo del uso del cheque visible para un bloque de anuncios:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ad-placement" id="ablockercheck"></div> <div id="ablockermsg" style="display: none"></div> 

"ablockercheck" es un identificador que bloquea un bloque. Por lo tanto, al marcar esto, si está visible, puede detectar si el bloque de anuncios está habilitado.

55
27 апр. La respuesta la da Roman Losev 27 abr. 2015-04-27 10:57 '15 a las 10:57 2015-04-27 10:57

Al final, ninguno de los ejemplos me quedó bien, así que escribí el mío.

Pruebas (sin el filter:alpha soporte de Internet Explorer filter:alpha ):

a) Comprobar si el documento está oculto

b) Compruebe si el elemento tiene ancho / altura / opacidad cero o display:none / visibility:hidden en los estilos incorporados.

c) Asegúrese de que el centro (también porque es más rápido que probar cada píxel / esquina) del elemento no está oculto por otro elemento (y todos los ancestros, por ejemplo: overflow:hidden / desplazarse / un elemento sobre otro) o pantalla de borde

d) Verifique si el elemento tiene una anchura / altura / opacidad cero o display:none / visibilidad: oculta en estilos computados (entre todos los ancestros)

Probado

Android 4.4 (navegador propio / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac Webkit), Internet Explorer (Internet Explorer 5-11 modos + Internet Explorer 8 en una máquina virtual ), Safari (Windows / Mac / iOS)

 var is_visible = (function () { var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0, y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0, relative = !!((!x  !y) || !document.elementFromPoint(x, y)); function inside(child, parent) { while(child){ if (child === parent) return true; child = child.parentNode; } return false; }; return function (elem) { if ( document.hidden || elem.offsetWidth==0 || elem.offsetHeight==0 || elem.style.visibility=='hidden' || elem.style.display=='none' || elem.style.opacity===0 ) return false; var rect = elem.getBoundingClientRect(); if (relative) { if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false; } else if ( !inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) || ( rect.top + elem.offsetHeight/2 < 0 || rect.left + elem.offsetWidth/2 < 0 || rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) || rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth) ) ) return false; if (window.getComputedStyle || elem.currentStyle) { var el = elem, comp = null; while (el) { if (el === document) {break;} else if(!el.parentNode) return false; comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle; if (comp  (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined'  comp.opacity != 1))) return false; el = el.parentNode; } } return true; } })(); 

Cómo utilizar:

 is_visible(elem) // boolean 
55
09 апр. La respuesta se da Aleko 09 de abril. 2014-04-09 20:06 '14 a las 20:06 2014-04-09 20:06

Debe comprobar tanto ... Pantalla como visibilidad:

 if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") { // The element is not visible } else { // The element is visible } 

Si comprobamos $(this).is(":visible") , jQuery verifica automáticamente ambas cosas.

50
31 янв. La respuesta la da Premshankar Tiwari el 31 de enero. 2014-01-31 09:24 '14 a las 9:24 AM 2014-01-31 09:24

Tal vez puedas hacer algo como esto.

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <input type="text" id="tElement" style="display:block;">Firstname</input> 
38
07 апр. Respuesta dada por Mathias Stavrou 07 abr. 2015-04-07 15:26 '15 a las 15:26 2015-04-07 15:26

Debido a que los Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (como se describe para jQuery: selector visible ), podemos verificar si el elemento es visible de esta manera:

 function isElementReallyHidden (el) { return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0; } var booElementReallyShowed = !isElementReallyHidden(someEl); $(someEl).parents().each(function () { if (isElementReallyHidden(this)) { booElementReallyShowed = false; } }); 
32
19 марта '14 в 15:42 2014-03-19 15:42 La respuesta la da Andron el 19 de marzo de 2014 a las 15:42 2014-03-19 15:42
 if($('#postcode_div').is(':visible')) { if($('#postcode_text').val()=='') { $('#spanPost').text('\u00a0'); } else { $('#spanPost').text($('#postcode_text').val()); } 
30
15 нояб. Respuesta dada por Gaurav el 15 de noviembre. 2013-11-15 13:41 '13 a las 13:41 2013-11-15 13:41

Pero, ¿y si el elemento CSS se ve así?

 .element{ position: absolute;left:-9999; } 

Así que esta es la respuesta a la pregunta de desbordamiento de pila. También se debe considerar cómo verificar si un elemento está fuera de pantalla .

30
23 авг. la respuesta es dada por RN Kushwaha 23 ago. 2014-08-23 23:53 '14 a las 23:53 2014-08-23 23:53

Simplemente compruebe la visibilidad comprobando el valor lógico, por ejemplo:

 if (this.hidden === false) { // Your code } 

Utilicé este código para cada función. De lo contrario, puede utilizar is(':visible') para verificar la visibilidad del elemento.

30
11 авг. La respuesta se da pixellabme 11 ago. 2014-08-11 08:28 '14 a las 8:28 2014-08-11 08:28

Se puede crear una función para verificar los atributos de visibilidad / visualización para determinar si un elemento se muestra en la interfaz de usuario o no.

 function checkUIElementVisible(element) { return ((element.css('display') !== 'none')  (element.css('visibility') !== 'hidden')); } 

Guion de trabajo

29
29 авг. La respuesta se da V31 29 de agosto. 2014-08-29 23:20 '14 a las 23:20 2014-08-29 23:20

También hay una expresión condicional ternaria para verificar el estado del elemento y luego cambiarlo:

 $('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); }); 
29
06 нояб. respuesta dada por cssimsek 06 nov. 2013-11-06 02:32 '13 a las 2:32 2013-11-06 02:32
  • 1
  • 2

Otras preguntas sobre etiquetas de o hacer una pregunta