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

8164

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

¿Cómo probarías si un elemento es visibleo hidden?

3
9839

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

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

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

Es lo mismo que la sugerencia de twernt , pero aplicada a un solo elemento; y coincide con el algoritmo recomendado en las preguntas frecuentes de jQuery .

Usamos jQuery's is () para verificar el elemento seleccionado con otro elemento, selector o cualquier objeto jQuery. Este método recorre los elementos DOM para encontrar una coincidencia que satisfaga el parámetro pasado. Devolverá verdadero si hay una coincidencia; de lo contrario, devolverá falso.

23
  • 173
    Esta solución parecería favorecer la confusión de visible=falsey display:none; Considerando que la solución de Mote ilustra claramente la intención de los codificadores de verificar display:none; (a través de la mención de ocultar y mostrar qué control display:noneno visible=true) 29 de diciembre de 2010 a las 18:30
  • 96
    Eso es correcto, pero :visibletambién verificará si los elementos principales son visibles, como señaló chiborg. 6 de enero de 2011 a las 12:30
  • 47
    Tiene un punto: dejaré en claro que el código solo verifica la displaypropiedad. Dado 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 ; 14 de enero de 2011 a las 16:54
  • 55
    De hecho, encontré que las palabras de lógica inversa son mejores:! $ ('Selector'). Is (': hidden'); por alguna razón. Vale la pena intentarlo.
    Kzqai
    5 de ene. De 2012 a las 15:36
  • 23
    Aquí hay una prueba de referencia simple es () contra regexp: jsperf.com/jquery-is-vs-regexp-for-css-visibility . Conclusión: si está buscando rendimiento, use regexp sobre is () (ya que is () busca todos los nodos ocultos primero antes de mirar el elemento real). 22/06/12 a las 14:12
1548

Puedes usar el hiddenselector:

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

Y el visibleselector:

// Matches all elements that are visible
$('element:visible')
11
  • 69
    solo tenga cuidado, hay algunos buenos consejos relacionados con el rendimiento en esta presentación: addyosmani.com/jqprovenperformance 11/07/11 a las 17:05
  • 28
    En las páginas 21 a 28 se muestra qué tan lento: oculto o: visible se compara con otros selectores. Gracias por señalar esto. 4/07/12 a las 20:12
  • 114
    Cuando se trata de un par de elementos y ocurre muy poco, es decir, LA MAYORÍA ABSURDAMENTE ENORME DE LOS CASOS, la cuestión del tiempo es una preocupación ridículamente menor. ¡Oh, no! ¡¡¡Se necesitaron 42 ms en lugar de 19 ms !!! 20 feb 2013 a las 14:56
  • 18
    Estoy alternando el elemento con este selector. ¡$ ('element: hidden') siempre es cierto para mí!
    ZoomIn
    9 de agosto de 2013 a las 7:18
  • dieciséis
    @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"es solo un caso que puede activarse: oculto. Los elementos sin alto ni ancho, los elementos con display: noney los elementos con antepasados ​​ocultos también se clasificarán como: ocultos. 15 de enero de 2016 a las 4:15
1020
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // 'element' is hidden
}

El método anterior no considera la visibilidad del padre. Para considerar al padre también, debe usar .is(":hidden")o .is(":visible").

Por ejemplo,

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

The above method will consider div2 visible while :visible not. But the above might be useful in many cases, especially when you need to find if there is any error divs visible in the hidden parent because in such conditions :visible will not work.

5
  • 134
    Esto solo verifica la propiedad de visualización de un solo elemento. El atributo: visible también comprueba la visibilidad de los elementos principales.
    chiborg
    3 de marzo de 2010 a las 10:10
  • 17
    Esta es la única solución que me funcionó al probar con IE 8.
    evanmcd
    13/01/12 a las 18:51
  • 21
    @chiborg Sí, pero a veces eso es lo que quieres y tuve que aprender por las malas lo "inteligente" que era jQuery ...
    Casey
    14 de marzo de 2014 a las 17:56
  • 9
    Esto hace responder a la pregunta, siendo la pregunta se refiere a un solo elemento y mediante el uso de las hide(), show()y toggle()funciones, sin embargo, como la mayoría ya han dicho, debemos utilizar los :visibley :hiddenpseudo-clases. 14/04/15 a las 9:18
  • 2
    Esta respuesta se puede usar cuando existe un elemento pero no está actualmente en la página, como después de detach ().
    atheaos
    25/04/2017 a las 16:05
563

Ninguna de estas respuestas aborda lo que entiendo que es la pregunta, que es lo que estaba buscando, "¿Cómo manejo los elementos que tienen visibility: hidden?" . Ni :visibletampoco :hiddenva a manejar esto, ya que ambos se buscan para su visualización por la documentación. Por lo que pude determinar, no hay un selector para manejar la visibilidad de CSS. Así es como lo resolví (selectores de 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
    }
});
3
  • 23
    Esta respuesta es buena para manejarla visibilityliteralmente, pero la pregunta era How you would test if an element has been hidden or shown using jQuery?. Usar jQuery significa: la displaypropiedad.
    MarioDS
    11 de mayo de 2013 a las 22:37
  • 13
    Los elementos con visibility: hiddeno opacity: 0se consideran visibles, ya que aún consumen espacio en el diseño. Vea la respuesta de Pedro Rainho y la documentación de jQuery en el :visibleselector.
    awe
    16/10/2013 a las 9:12
  • 10
    debe recorrer el DOM para verificar los padres del nodo, o de lo contrario, esto es inútil.
    vsync
    22/04/2014 a las 19:20
413

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


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

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

Si simplemente está actuando sobre un elemento en función de su visibilidad, puede incluir :visibleo :hiddenen la expresión del selector. Por ejemplo:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');
1
  • 6
    preguntándome 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
    jazzcat
    8 de mayo de 2017 a las 9:34
313

A menudo, al comprobar si algo es visible o no, va 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 usarlo filter(":visible")o filter(":hidden")seguirlo encadenándolo con la acción que desea realizar.

Entonces, en lugar de una ifdeclaración, 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 sola línea:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });
2
  • 25
    No hay razón para extraer el nodo DOM en el fragmento utilizado en el ejemplo y luego tener que buscarlo nuevamente. Mejor simplemente hacer: var $ button = $ ('# btnUpdate'); Y luego, en las expresiones If, simplemente use el botón $ en lugar de $ (botón). Tiene la ventaja de almacenar en caché el objeto jQuery. 21/04/12 a las 22:32
  • 2
    aquí hay un ejemplo simple jquerypot.com/… 29/04/18 a las 13:28
257

El :visibleselector de acuerdo con la documentación de jQuery :

  • They have a CSS display value of none.
  • They are form elements with type="hidden".
  • Their width and height are explicitly set to 0.
  • An ancestor element is hidden, so the element is not shown on the page.

Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout.

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 hacerlo .css("display") == 'none'no solo es más rápido, sino que también devolverá la verificación de visibilidad correctamente.

Si desea comprobar la visibilidad en lugar de la pantalla, se debe utilizar: .css("visibility") == "hidden".

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

Because :visible is a jQuery extension and not part of the CSS specification, queries using :visible cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :visible to select elements, first select the elements using a pure CSS selector, then use .filter(":visible").

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

0
227

Cómo funciona la visibilidad de elementos y jQuery ;

Un elemento puede estar oculto con display:none, visibility:hiddeno opacity:0. La diferencia entre esos métodos:

  • display:none oculta el elemento y no ocupa espacio;
  • visibility:hidden oculta el elemento, pero aún ocupa espacio en el diseño;
  • opacity:0oculta el elemento como "visibilidad: oculta" y aún ocupa espacio en el diseño; la única diferencia es que la opacidad permite hacer 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 útiles de alternancia de jQuery:

    $('.click').click(function() {
      $('.target').toggle();
    });
    
    $('.click').click(function() {
      $('.target').slideToggle();
    });
    
    $('.click').click(function() {
      $('.target').fadeToggle();
    });
    
2
  • 21
    Otra diferencia entre visibility:hiddeny opacity:0es que el elemento seguirá respondiendo a eventos (como clics) con opacity:0. Aprendí ese truco haciendo un botón personalizado para cargar archivos.
    urraka
    29/06/12 a las 18:15
  • 2
    también si oculta la entrada con opacidad: 0, todavía se selecciona con la tecla de tabulación 12 dic 2017 a las 11:08
226

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   */
}
0
174

También puede 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

3
  • 7
    Funciona de forma ligeramente diferente a jQuery; se considera visibility: hiddenpara ser visibles .
    alex
    20 de septiembre de 2012 a las 4:45
  • 5
    Es bastante fácil cambiar el código anterior para imitar el comportamiento de jQuery (posiblemente estúpido). . . . . function 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 );}}falso retorno;} 26/09/12 a las 13:57
  • 4
    Claro, solo estaba agregando eso para el beneficio de los usuarios que usaron esto sin escanear su código. :)
    alex
    26/09/12 a las 21:33
172

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

Para esconder / mostrar, llamo .addClass("hide")/.removeClass("hide"). Para comprobar la visibilidad, utilizo .hasClass("hide").

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

3
  • 13
    .hasClass('hide')no comprueba si un antepasado del padre está oculto (lo que también lo ocultaría). Posiblemente podría hacer que esto funcione correctamente comprobando si .closest('.hide').length > 0, pero ¿por qué reinventar la rueda?
    nbrooks
    25 de septiembre de 2012 a las 23:57
  • 2
    La variante que propones devuelve si el elemento está visible en html, mi variante devuelve si el elemento fue ocultado directamente por tu código javascript / motor de vista. Si sabe que los elementos principales nunca deben ocultarse, use .hasClass () para ser más estricto y evitar errores futuros. Si desea verificar no solo la visibilidad, sino también el estado del elemento, use .hasClass () también. En otros casos, .closest () es mejor. 1/12/12 a las 20:27
  • 2
    ¿Por qué no usas .is (": visible")? 16 oct 2018 a las 9:43
148

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="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="" width="300"/>

Fuente (de mi blog):

Blogger Plug n Play - Herramientas y widgets de jQuery: Cómo ver si un elemento está oculto o visible con jQuery

1
  • 2
    @Adrew, pero este enlace muestra un ejemplo funcional de esta función. Creo que una respuesta práctica puede pesar sobre una página completa de texto :) 25 de enero de 2013 a las 6:30
141

Uno puede simplemente usar el atributo hiddeno visible, como:

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

O se puede simplificar con el mismo es de la siguiente manera.

$(element).is(":visible")
0
140

ebdivdebe establecerse en style="display:none;". Funciona tanto para mostrar como para ocultar:

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});
128

Otra respuesta que debe tener en cuenta es que si está ocultando un elemento, debe usar jQuery , pero en lugar de ocultarlo, elimina todo el elemento, pero copia su contenido HTML y la etiqueta en una variable jQuery, y luego todo lo que necesita hacer es probar si existe una etiqueta de este tipo en la pantalla, usando el archivo normal if (!$('#thetagname').length).

0
108

Al probar un elemento contra el :hiddenselector en jQuery, se debe considerar que un elemento posicionado absoluto puede reconocerse como oculto aunque sus elementos secundarios sean visibles .

Esto parece algo contrario a la intuición en primer lugar, aunque echar un vistazo más de cerca a la documentación de jQuery proporciona la información relevante:

Elements can be considered hidden for several reasons: [...] Their width and height are explicitly set to 0. [...]

Entonces, esto tiene sentido en lo que respecta al modelo de caja y el estilo calculado para el elemento. Incluso si el ancho y el alto no se establecen explícitamente en 0, pueden establecerse 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 alto cero.

JSFiddle con jQuery 3.0.0-alpha1:

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

El mismo código JavaScript tendrá esta salida:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
95

Esto puede funcionar:

expect($("#message_div").css("display")).toBe("none");
1
  • 8
    ¿Qué idioma / dialecto / biblioteca es esta? No estoy familiarizado con esta sintaxis en JS ...
    nbrooks
    25 de septiembre de 2012 a las 23:31
79

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>
70

Para comprobar si no es visible utilizo !:

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

O lo siguiente también es el sam, guardando el selector de 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')
}
3
  • 2
    ¿Cómo determinó que guardar un selector en variable es realmente más rápido?
    Ilia
    20/06/2013 a las 21:32
  • 4
    Hola @Ilia Rostovtsev jsperf.com/caching-jquery-selectors Allí puedes ejecutar la prueba. De todos modos, es bueno tenerlo en caché para que se pueda acceder más rápido 21 de junio de 2013 a las 6:56
  • 3
    Esto es adecuado si desea utilizar una sola variable durante todo el proceso en lugar de llamar y llamar al mismo objeto. 25 de agosto de 2013 a las 16:57
64

Utilice alternancia de clases, no edición de estilo. . .

Usar clases designadas para "ocultar" elementos es fácil y también uno de los métodos más eficientes. Alternar una clase 'oculta' con un Displayestilo de 'ninguno' funcionará más rápido que editar ese estilo directamente. Expliqué algo de esto bastante a fondo en la pregunta de Stack Overflow Convertir dos elementos visibles / ocultos en el mismo div .


Mejores prácticas y optimización de JavaScript

Aquí hay un video realmente esclarecedor de una charla técnica de Google realizada por el ingeniero front-end de Google, Nicholas Zakas:

62

Ejemplo de uso de la marca de verificación visible para adblocker está activado:

$(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 un ID que bloquea adblocker. Por lo tanto, verificando si está visible, puede detectar si el bloqueador de anuncios está activado.

62

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

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

a) Comprueba si el documento no está oculto

b) Verifique si un elemento tiene cero ancho / alto / opacidad o display:none/ visibility:hiddenen 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 antepasados, por ejemplo: overflow:hidden/ scroll / un elemento sobre otro) o los bordes de la pantalla

d) Verifique si un elemento tiene cero ancho / alto / opacidad o display:none/ visibilidad: oculto en estilos calculados (entre todos los antepasados)

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 de Internet Explorer 5-11 + Internet Explorer 8 en un máquina virtual) y 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
0
54

Debe comprobar tanto ... Visualización como visibilidad:

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

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

45

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>
41

Simplemente verifique la visibilidad verificando un valor booleano, como:

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

Usé este código para cada función. De lo contrario, puede utilizar is(':visible')para comprobar la visibilidad de un elemento.

39

Porque 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;
    }
});
37

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

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

Por lo tanto , también se debe considerar esta respuesta a la pregunta de Stack Overflow: Cómo verificar si un elemento está fuera de la pantalla .

0
35

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

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

Violín de trabajo

34

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'); });
1
  • 4
    O, ya sabes, simplemente deshazte de todo el condicional y di $('elementToToggle').toggle('slow');...:)
    nbrooks
    25 de diciembre de 2013 a las 8:53
33
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}