54 Pregunta: ¿Cómo compruebo si un elemento está oculto en jQuery?

pregunta creada en Sun, Oct 30, 2016 12:00 AM

Es posible cambiar la visibilidad de un elemento, usando las funciones .hide(), .show() o .toggle().

¿Cómo probarías si un elemento está visible u oculto?

    
7282
  1. Vale la pena mencionar (incluso después de todo este tiempo), que $(element).is(":visible") funciona para jQuery 1.4.4, pero no para jQuery 1.3.2, debajo de Internet & nbsp; Explorer & nbsp; 8 . Esto se puede probar utilizando Fragmento de prueba útil de Tsvetomir Tsonev . Solo recuerda cambiar la versión de jQuery, para probar debajo de cada una.
    2011-02-01 03: 57: 34Z
  2. Esto está relacionado aunque es una pregunta diferente: stackoverflow.com/questions/17425543/…
    2016-03-22 19: 20: 54Z
  3. ¿Cuál es tu definición de oculto?
    2018-05-19 07: 29: 38Z
30 Respuestas                              30                         

Dado que la pregunta se refiere a un solo elemento, este código podría ser más adecuado:

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

// The same works with hidden
$(element).is(":hidden"); 

Igual que sugerencia de twernt , pero aplicado a un solo elemento; y coincide con el algoritmo recomendado en las Preguntas frecuentes de jQuery

    
8935
2018-07-02 15: 50: 46Z
  1. Esta solución parece fomentar la combustión de visible=false y display:none; mientras que la solución de Mote ilustra claramente la intención de los codificadores de verificar el display:none; (a través de la mención de ocultar y mostrar qué control display:none no visible=true)
    2010-12-29 18: 30: 57Z
  2. Eso es correcto, pero :visible también verificará si los elementos principales están visibles, como señala chiborg.
    2011-01-06 12: 30: 27Z
  3. Tienes un punto: dejaré en claro que el código solo busca la propiedad display. Teniendo en cuenta que la pregunta original es para show() y hide(), y establecieron display, mi respuesta es correcta. Por cierto, funciona con IE7, aquí hay un fragmento de prueba: jsfiddle.net/MWZss ;
    2011-01-14 16: 54: 41Z
  4. En realidad encontré que las palabras lógicas inversas son mejores:! $('selector'). is (': hidden'); por alguna razón. Vale la pena intentarlo.
    2012-01-05 15: 36: 15Z
  5. Aquí hay una prueba comparativa simple () contra (regexp): jsperf.com/jquery-is-vs-regexp-for-css-visibility . Conclusión: si está fuera del rendimiento, use regexp over is () (ya que (() busca todos los nodos ocultos antes de mirar el elemento real).
    2012-06-22 14: 12: 11Z

Puede usar hidden selector:

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

Y el visible selector:

 
// Matches all elements that are visible
$('element:visible')
    
1382
2018-03-08 15: 38: 27Z
  1. solo tenga cuidado, hay algunos consejos relacionados con el buen desempeño en esta presentación: addyosmani.com/jqprovenperperformance
    2011-07-11 17: 05: 57Z
  2. En las páginas 21 a 28 muestra cuán lento: oculto o: visible se compara con otros selectores. Gracias por señalar esto.
    2012-07-04 20: 12: 04Z
  3. Cuando se trata de un par de elementos y muy poco está sucediendo, es decir, LA MAYORÍA DE LOS CASOS ABSOLUTAMENTE VASOS, el problema del tiempo es una preocupación ridículamente menor. ¡Oh, no! ¡Se necesitaron 42 ms en lugar de 19 ms!
    2013-02-20 14: 56: 49Z
  4. Estoy alternando el elemento de forma mamaria usando este selector. $('elemento: oculto') siempre es cierto para mí!
    2013-08-09 07: 18: 33Z
  5. @ cwingrav Es posible que desee volver a leer la documentación,: hidden se aplica a todos los elementos. Los elementos de formulario con type="hidden" son solo un caso que puede desencadenar: oculto. Los elementos sin altura y anchura, los elementos con display: none y los elementos con ancestros ocultos también se calificarán como: ocultos.
    2016-01-15 04: 15: 16Z
 
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // element is hidden
}

El método anterior no considera la visibilidad del padre. Para considerar a los padres también, debe utilizar .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 considerará div2 visible mientras que :visible no. Pero lo anterior puede ser útil en muchos casos, especialmente cuando necesita encontrar divs de error visibles en el padre oculto porque en tales condiciones :visible no funcionará.

    
879
2018-08-02 06: 57: 48Z
  1. Esto solo verifica la propiedad de visualización de un solo elemento. El atributo: visible también verifica la visibilidad de los elementos principales.
    2010-03-03 10: 10: 48Z
  2. Esta es la única solución que me funcionó al realizar pruebas con IE 8.
    2012-01-13 18: 51: 41Z
  3. Esta no es la solución a mi problema, pero el método me ayudó a identificar una solución para verificar una propiedad de mi problema.
    2014-03-14 17: 37: 17Z
  4. @ chiborg Sí, pero a veces eso es lo que quieres y tuve que aprender de la manera más difícil cómo de jQuery era "inteligente" ...
    2014-03-14 17: 56: 14Z
  5. Esto responde a la pregunta, ya que se trata de un elemento único y al usar las funciones hide(), show() y toggle(), sin embargo, como la mayoría ya ha dicho, deberíamos use las pseudo-clases :visible y :hidden.
    2015-04-14 09: 18: 30Z

Ninguna de estas respuestas responde a lo que entiendo que es la pregunta, que es lo que estaba buscando, "¿Cómo manejo los elementos que tienen visibility: hidden?" . Ni el :visible ni el :hidden manejarán esto, ya que ambos buscan visualización según la documentación. UNAHasta donde pude determinar, no hay ningún selector para manejar la visibilidad de CSS. Aquí es cómo lo resolví (selectores jQuery estándar, puede haber una sintaxis más condensada):

 
$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});
    
497
2017-06-26 07: 12: 02Z
  1. Esta respuesta es buena para manejar visibility literalmente, pero la pregunta fue How you would test if an element has been hidden or shown using jQuery?. Usar jQuery significa: la propiedad display.
    2013-05-11 22: 37: 45Z
  2. Los elementos con visibility: hidden o opacity: 0 se consideran visibles, ya que todavía consumen espacio en el diseño. Consulte respuesta por Pedro Rainho y documentación de jQuery en el selector :visible.
    2013-10-16 09: 12: 04Z
  3. necesita recorrer el DOM para verificar los padres del nodo, o de lo contrario, esto es inútil.
    2014-04-22 19: 20: 11Z
  4. esto no funcionará si oculta el elemento con .hide ().
    2015-08-06 05: 51: 23Z

De ¿Cómo puedo determinar el estado de un elemento conmutado?


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

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

Si simplemente estás actuando en un elemento basado en su visibilidad, puedes incluir :visible o :hidden en la expresión de selección. Por ejemplo:

 
 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');
    
363
2016-01-12 14: 08: 58Z
  1. preguntándose por qué ninguna respuesta menciona el caso cuando el elemento se aleja de la ventana visible, como top:-1000px ... Supongo que es un caso de borde
    2017-05-08 09: 34: 11Z

A menudo, cuando se comprueba si algo está visible o no, vas a seguir adelante inmediatamente y hacer algo más con él. El encadenamiento de jQuery lo hace fácil.

Entonces, si tiene un selector y desea realizar alguna acción en él solo si está visible u oculto, puede usar filter(":visible") o filter(":hidden") seguido de encadenarlo con la acción que desea realizar.

Entonces, en lugar de una declaración if, como esta:

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

O más eficiente, 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" });
    
270
2015-04-27 20: 10: 05Z
  1. No hay razón para extraer el nodo DOM en el fragmento que se usa en el ejemplo, y luego volver a buscarlo. Es mejor simplemente hacer: var $button = $('# btnUpdate'); Y luego en las expresiones If solo use el botón $en lugar de $(botón). Tiene la ventaja de almacenar en caché el objeto jQuery.
    2012-04-21 22: 32: 30Z
  2. aquí hay un ejemplo simple jquerypot.com/…
    2018-04-29 13: 28: 08Z

El selector :visible de acuerdo con la documentación de jQuery :

  
  • Tienen un valor de CSS displayde none.
  •   
  • Son elementos de formulario con type="hidden".
  •   
  • Su ancho y alto se establecen explícitamente en 0.
  •   
  • Un elemento ancestro 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 en otros, porque si desea verificar si el elemento es visible (display != none), ignorando la visibilidad de los padres, encontrará que hacer .css("display") == 'none' no solo es más rápido, sino que también devolverá el control de visibilidad correctamente.

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 :

  

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

Además, si le preocupa el rendimiento, debe marcar Ahora me ves ... mostrar /ocultar rendimiento (2010-05-04). Y usa otros métodos para mostrar y ocultar elementos.

    
223
2017-06-21 01: 41: 47Z

Esto funciona para mí, y estoy usando show() y hide() para hacer que mi div esté oculto /visible:

 
if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}
    
199
2015-12-14 21: 32: 03Z

Cómo visibilidad de elementos y jQuery funciona ;

Un elemento podría estar oculto con display:none, visibility:hidden o opacity:0. La diferencia entre esos 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 "visibilidad: oculto", y aún ocupa espacio en el diseño; la única diferencia es que la opacidad permite que un 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 de conmutación jQuery útiles:

     
    $('.click').click(function() {
      $('.target').toggle();
    });
    
    $('.click').click(function() {
      $('.target').slideToggle();
    });
    
    $('.click').click(function() {
      $('.target').fadeToggle();
    });
    
196
2017-07-30 22: 00: 31Z
  1. Otra diferencia entre visibility:hidden y opacity:0 es que el elemento seguirá respondiendo a eventos (como clics) con opacity:0. Aprendí ese truco haciendo un botón personalizado para subir archivos.
    2012-06-29 18: 15: 21Z
  2. también si oculta la entrada con opacidad: 0, aún se selecciona con la tecla de tabulación
    2017-12-12 11: 08: 36Z

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

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

Es una forma simple y clara de verificar /ocultar /mostrar elementos, si no planea utilizar los métodos .toggle() o .animate().

    
152
2014-03-19 08: 15: 37Z
  1. .hasClass('hide') no comprueba si un antepasado del padre está oculto (lo que también lo haría oculto). Posiblemente podría hacer que esto funcione correctamente si verifica .closest('.hide').length > 0, pero ¿por qué reinventar la rueda?
    2012-09-25 23: 57: 15Z
  2. La variante que propones devuelve si el elemento está visible en html, mi variante devuelve si el elemento era directlY oculto por su código javascript /motor de visualización. Si sabe que los elementos principales nunca deben ocultarse, use .hasClass () para ser más estrictos y evitar futuros errores. Si desea verificar no solo la visibilidad, sino también el estado del elemento, use .hasClass () también. En otros casos, .closest () es mejor.
    2012-12-01 20: 27: 09Z
  3. ¿Por qué no solo usas .is (": visible")?
    2018-10-16 09: 43: 43Z

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:

  1. Funciona en todas partes

  2. Funciona para elementos anidados

  3. Funciona para CSS y estilos en línea

  4. No requiere un marco

148
2014-03-19 08: 15: 29Z
  1. Funciona de manera ligeramente diferente a jQuery's; considera que visibility: hidden es visible .
    2012-09-20 04: 45: 23Z
  2. Es bastante fácil cambiar el código de arriba para imitar el comportamiento de jQuery (posiblemente estúpido). . . . . la función isRendered (o) {if ((o.nodeType! = 1) || (o == document.body)) {return true;} if (o.currentStyle & & o.currentStyle ["display"]! = "none") {return isRendered (o.parentNode);} else if (window.getComputedStyle) {if (document.defaultView.getComputedStyle (o, null) .getPropertyValue ("display")! = "none") {return isRendered (o.parentNode);}} devolver falso;}
    2012-09-26 13: 57: 30Z
  3. Claro, solo estaba agregando eso en beneficio de los usuarios que usaron esto sin escanear su código. :)
    2012-09-26 21: 33: 20Z

Uno puede simplemente usar el atributo hidden o visible, como:

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

O puede simplificar lo mismo con is de la siguiente manera.

 
$(element).is(":visible")
    
126
2013-03-16 10: 04: 04Z

Enlace de demostración

 
$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
    alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<img id="book" src="http://www.chromefusion.com/wp-content/uploads/2012/06/chrome-logo.jpg" alt="" />

Fuente:

Plug &Play de Blogger - Herramientas y widgets de jQuery: cómo ver si el elemento está oculto o visible usando jQuery

    
122
2018-12-13 12: 15: 11Z
  1. @ Adrew pero este enlace muestra un ejemplo funcional de esta función. Creo que una respuesta práctica puede tener un peso sobre una página completa de texto :)
    2013-01-25 06: 30: 44Z
  2. @ jolly.exe hasta que el ejemplo de trabajo desaparezca, es decir
    2013-10-10 21: 49: 17Z

ebdiv se debe establecer en style="display:none;". Funciona tanto para mostrar como para ocultar:

 
$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});
    
118
2018-10-26 07: 33: 26Z

Otra respuesta que deberías poner enla consideración es si está ocultando un elemento, debe usar jQuery , pero en lugar de esconderlo realmente, elimina todo el elemento, pero copia su contenido HTML y la etiqueta en una variable jQuery, y todo lo que debe hacer es probar si hay una etiqueta de ese tipo en la pantalla, usando el if (!$('#thetagname').length) normal.

    
114
2013-03-26 22: 12: 11Z

Cuando se prueba un elemento con el selector :hidden en jQuery, debe considerarse que un elemento posicionado absoluto puede reconocerse como oculto aunque sus elementos secundarios estén visibles .

Esto parece algo contraintuitivo en primer lugar, aunque al observar más detenidamente la documentación de jQuery se obtiene la información relevante:

  

Los elementos pueden considerarse ocultos por varias razones: [...] su ancho y alto se establecen explícitamente en 0. [...]

Esto realmente tiene sentido en lo que respecta al modelo de caja y el estilo computado para el elemento. Incluso si el ancho y el alto no se configuran explícitamente en 0, se pueden establecer implícitamente .

Eche un vistazo al siguiente ejemplo:

 
console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false
.foo {
  position: absolute;
  left: 10px;
  top: 10px;
  background: #ff0000;
}

.bar {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: #0000ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <div class="bar"></div>
</div>

ACTUALIZACIÓN PARA JQUERY 3.x:

¡Con jQuery 3 el comportamiento descrito cambiará! Los elementos se considerarán visibles si tienen cuadros de diseño, incluidos los de ancho y /o altura cero.

JSFiddle con jQuery 3.0.0-alpha1:

http://jsfiddle.net/pM2q3/7/

El mismo JS tendrá esta salida:

 
console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
    
89
2016-08-06 08: 53: 27Z

Esto puede funcionar:

 
expect($("#message_div").css("display")).toBe("none");
    
84
2013-03-06 06: 41: 05Z
  1. ¿Qué idioma /dialecto /biblioteca es este? No estoy familiarizado con esta sintaxis en JS ...
    2012-09-25 23: 31: 33Z
  2. Parece una prueba de unidad de jasmine .
    2017-03-23 ​​00: 48: 31Z

Ejemplo:

 
$(document).ready(function() {
  if ($("#checkme:hidden").length) {
    console.log('Hidden');
  }
});
<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>
    
67
2017-07-16 13: 52: 00Z

Para verificar si no está visible, uso !:

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

O lo siguiente es también sam, guardando 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')
}
    
63
2013-09-14 08: 01: 52Z
  1. ¿Cómo determinó que guardar un selector en una variable es realmente más rápido?
    2013-06-20 21: 32: 30Z
  2. Hola, @Ilia Rostovtsev jsperf.com/caching -jquery-selectors Allí puede ejecutar la prueba. De todos modos, es bueno tenerlo en caché para poder acceder más rápido
    2013-06-21 06: 56: 50Z
  3. Esto es adecuado si desea usar una sola variable a través del proceso en lugar de llamar y llamar al mismo objeto.
    2013-08-25 16: 57: 09Z

Use la alternancia de clases, no la edición de estilos. . .

Usar clases designadas para "ocultar" elementos es fácil y también uno de los métodos más eficientes. Cambiar a una clase 'oculto' con un estilo Display de 'ninguno' tendrá un rendimiento más rápido que editar ese estilo directamente. Expliqué algo de esto bastante bien en la pregunta de Desbordamiento de pila Convertir dos elementos en visibles /ocultos en la misma división .


Mejores prácticas y optimización de JavaScript

Aquí hay un video realmente esclarecedor de un ingeniero de front-end de Google Tech Talk por Google Nicholas Zakas:

60
2017-05-23 12: 10: 45Z

Se ha activado el ejemplo de uso de la verificación visible para el bloqueador de anuncios:

 
$(document).ready(function(){
  if(!$("#ablockercheck").is(":visible"))
    $("#ablockermsg").text("Please disable adblocker.").show();
});
<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 una ID que bloquea adblocker. Por lo tanto, si está visible, puede verificar si el bloqueador de anuncios está activado.

    
58
2016-09-13 14: 07: 43Z

Después de todo, ninguno de los ejemplos me conviene, así que escribí el mío.

Pruebas (no admite Internet Explorer filter:alpha):

a) Compruebe si el documento no está oculto

b) Compruebe si un elemento tiene ancho /altura /opacidad cero o display:none/visibility:hidden en estilos en línea

c) Compruebe si 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 /scroll /un elemento sobre otro) o los bordes de la pantalla

d) Compruebe si un elemento tiene una anchura /altura /opacidad de cero o display:none /visibilidad: oculto en estilos computados (entre todos los ancestros)

Probado en

Android 4.4 (navegador nativo /Chrome /Firefox), Firefox (Windows /Mac), Chrome (Windows /Mac), Opera (Windows Presto /Mac Webkit), Internet Explorer (modos de documento Internet Explorer 5-11 + 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
    
57
2014-04-28 18: 10: 50Z

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 revisamos $(this).is(":visible"), jQuery verifica ambas cosas automáticamente.

    
51
2014-07-19 15: 23: 42Z

Tal vez puedas hacer algo como esto

 
$(document).ready(function() {
   var visible = $('#tElement').is(':visible');

   if(visible) {
      alert("visible");
                    // Code
   }
   else
   {
      alert("hidden");
   }
});
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<input type="text" id="tElement" style="display:block;">Firstname</input>
    
39
2016-05-02 12: 59: 24Z

Simplemente verifique la visibilidad buscando un valor booleano, como:

 
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 de un elemento.

    
34
2017-07-1613: 56: 39Z

Debido a 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 realmente 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;
    }
});
    
33
2014-03-20 10: 32: 25Z

¿Pero qué pasa si el CSS del elemento es como el siguiente?

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

Entonces esta respuesta a la pregunta de desbordamiento de pila Cómo comprobar si un elemento está fuera de pantalla debería también ser considerado.

    
31
2017-05-23 11: 55: 02Z

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

 
$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
    
30
2013-11-05 23: 32: 02Z
  1. O, y'kno, simplemente deshágase de todo el condicional y diga $('elementToToggle').toggle('slow'); ... :)
    2013-12-25 08: 53: 21Z
 
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}
    
30
2013-12-07 13: 51: 23Z

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

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

Fiddle de trabajo

    
30
2014-11-22 11: 23: 57Z
fuente colocada aquí