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

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

¿Cómo probaría si un elemento es visible or hidden?

preguntado Oct 07 '08, 14:10

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, bajo Internet Explorer 8. Esto se puede probar usando Fragmento de prueba útil de Tsvetomir Tsonev. Solo recuerde cambiar la versión de jQuery, para probar en cada una. -

Esto está relacionado aunque es una pregunta diferente: stackoverflow.com/questions/17425543/… -

Si no está interesado en la ocultación de elementos CSS virtual, sino en la visibilidad física en el "área de la ventana gráfica" para que el usuario lo vea stackoverflow.com/questions/487073/… y stackoverflow.com/questions/123999/… -

30 Respuestas

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 sugerencia de twernt, pero aplicado a un solo elemento; y eso 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.

contestado el 06 de mayo de 20 a las 16:05

Esta solución parecería favorecer la confusió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) - kralco626

Eso es correcto, pero :visible también comprobará si los elementos principales son visibles, como señaló chiborg. - Tsvetomir Tsonev

Tiene un punto: dejaré en claro que el código solo verifica el display propiedad. Dado que la pregunta original es para show() y hide()y ellos establecieron display, mi respuesta es correcta. Por cierto, funciona con IE7, aquí hay un fragmento de prueba: jsfiddle.net/MWZss ; - Tsvetomir Tsonev

De hecho, encontré que las palabras de lógica inversa son mejores:! $ ('Selector'). Is (': hidden'); por alguna razón. Vale la pena intentarlo. - Kzqai

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). - Max Leske

Puede utilizar el hidden selector:

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

En los visible selector:

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

respondido 08 mar '18, 18:03

solo tenga cuidado, hay algunos buenos consejos relacionados con el rendimiento en esta presentación: addyosmani.com/jqprovenperformance - codecraig

En las páginas 21 a 28 muestra qué tan lento: oculto o: visible se compara con otros selectores. Gracias por señalar esto. - Etienne Dupuis

Cuando se trata de un par de elementos y ocurre muy poco, es decir, LA MAYORÍA ABSURDAMENTE VASTA DE CASOS, la cuestión del tiempo es una preocupación ridículamente menor. ¡Oh, no! ¡¡¡Se necesitaron 42 ms en lugar de 19 ms !!! - vbullinger

Estoy alternando el elemento con este selector. ¡$ ('element: hidden') siempre es cierto para mí! - Acercarse

@cwingrav Es posible que desee volver a leer la documentación,: hidden se aplica a todos los elementos. Formar elementos con type="hidden" es solo un caso que puede desencadenar: oculto. Elementos sin alto ni ancho, elementos con display: none, y los elementos con antepasados ​​ocultos también se clasificarán como: ocultos. - Joshua Walsh

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") or .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 :visible no. Pero lo anterior puede ser útil en muchos casos, especialmente cuando necesita encontrar si hay algún error divs visible en el padre oculto porque en tales condiciones :visible no trabajará.

contestado el 06 de mayo de 20 a las 16:05

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

Esta es la única solución que funcionó para mí al probar con IE 8. - evanmcd

@chiborg Sí, pero a veces eso es lo que quieres y tuve que aprender por las malas lo "inteligente" que era jQuery ... - Casey

Esto responde a la pregunta, ya que la pregunta se trata de un solo elemento y al usar el hide(), show() y toggle() funciones, sin embargo, como la mayoría ya ha dicho, deberíamos usar la :visible y :hidden pseudoclases. - Jimmy Knoot

Esta respuesta se puede usar cuando existe un elemento pero no está actualmente en la página, como después de detach (). - atheaos

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?". Ninguno :visible ni :hidden se encargará de esto, ya que ambos buscan visualización según 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
    }
});

Respondido el 26 de junio de 17 a las 10:06

Esta respuesta es buena de manejar visibility literalmente, pero la pregunta era How you would test if an element has been hidden or shown using jQuery?. Usar jQuery significa: display propiedad. - MarioDS

Elementos con visibility: hidden or opacity: 0 se consideran visibles, ya que aún consumen espacio en el diseño. Ver responder por Pedro Rainho y documentación de jQuery al :visible selector. - temor

debe recorrer el DOM para verificar los padres del nodo, o de lo contrario, esto es inútil. - vsync

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


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

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 :visible or :hidden en la expresión del selector. Por ejemplo:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');

Respondido el 12 de enero de 16 a las 17:01

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 extremo - Jazzcat

A menudo, al comprobar si algo es visible o no, va a seguir adelante de inmediato 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") or filter(":hidden") seguido de encadenarlo con la acción que desea realizar.

Entonces en lugar de un if declaració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" });

Respondido 27 Abr '15, 23:04

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. - LocalPCGuy

aquí hay un ejemplo simple jquerypot.com/… - Ketan Savaliya

La :visible selector según la documentación de jQuery:

  • Tienen un CSS display valor de none.
  • Son elementos de forma 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.

Elementos con visibility: hidden or opacity: 0 se consideran visibles, ya que aún consumen espacio en el diseño.

Esto es útil en algunos casos e inútil en otros, porque si quieres comprobar si el elemento está visible (display != none), ignorando la visibilidad de los padres, encontrará que al 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 visualización, debe usar: .css("visibility") == "hidden".

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

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

Además, si le preocupa el rendimiento, debe verificar Ahora me ves ... mostrar / ocultar rendimiento (2010 de mayo de 05). Y use otros métodos para mostrar y ocultar elementos.

Respondido el 21 de junio de 17 a las 04:06

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

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}

Respondido el 15 de diciembre de 15 a las 00:12

¿Como visibilidad de elementos y trabajos de jQuery;

Un elemento se puede ocultar con display:none, visibility:hidden or 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:0 oculta 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();
    });
    

Respondido 31 Jul 17, 01:07

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 cargar archivos. - urraka

también si oculta la entrada con opacidad: 0, aún se selecciona con la tecla de tabulación - YangombiUmpakati

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

respondido 19 mar '14, 12:03

Funciona de forma ligeramente diferente a jQuery; considera visibility: hidden para ser visibles. - alex

Es bastante fácil cambiar el código anterior para imitar el comportamiento (posiblemente estúpido) de jQuery. . . . . 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;} - Matt Brock

Claro, solo estaba agregando eso para beneficio de los usuarios que usaron esto sin escanear su código. :) - alex

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 .toggle() or .animate() métodos.

respondido 19 mar '14, 12:03

.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

La variante que propone devuelve si el elemento está visible en html, mi variante devuelve si el elemento fue ocultado directamente por su 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. - Evgeny Levin

¿Por qué no usas .is (": visible")? - dont_trust_me

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:

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

Respondido 27 ago 19, 10:08

@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 :) - Código espía

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

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

O puedes simplificar lo mismo con is como sigue.

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

respondido 16 mar '13, 14:03

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

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

Respondido 26 Oct 18, 10:10

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 HTML contenido y la etiqueta en sí en una variable jQuery, y luego todo lo que necesita hacer es probar si existe dicha etiqueta en la pantalla, usando el if (!$('#thetagname').length).

respondido 27 mar '13, 02:03

Al probar un elemento contra :hidden selector 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:

Los elementos pueden considerarse ocultos por varias razones: [...] Su ancho y alto se establecen explícitamente en 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 la altura no están configurados explícitamente a 0 se pueden configurar 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

contestado el 06 de mayo de 20 a las 16:05

Esto puede funcionar:

expect($("#message_div").css("display")).toBe("none");

respondido 06 mar '13, 10:03

¿Qué idioma / dialecto / biblioteca es esta? No estoy familiarizado con esta sintaxis en JS ... - Nbrooks

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>

Respondido 16 Jul 17, 16:07

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 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')
}

Respondido el 14 de Septiembre de 13 a las 12:09

¿Cómo determinó que guardar un selector en variable es realmente más rápido? - Ilia Rostovtsev

Hola @Ilia Rostovtsev jsperf.com/caching-jquery-selectors Allí puede ejecutar la prueba. De todos modos, es bueno tenerlo en caché para que se pueda acceder más rápido. Matthias Wegtun

Esto es adecuado si desea utilizar una sola variable durante todo el proceso en lugar de llamar y llamar al mismo objeto. - Kenneth Palaganas

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 Display el estilo 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:

Respondido el 20 de junio de 20 a las 12:06

Ejemplo de uso del visibles comprobar si el bloqueador de anuncios 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.

Respondido el 13 de Septiembre de 16 a las 17:09

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

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

a) Comprueba si el documento no está oculto

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

d) Verifique si un elemento tiene ancho / alto / opacidad cero 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 una 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;
    }
})();

Modo de empleo:

is_visible(elem) // boolean

contestado el 06 de mayo de 20 a las 16:05

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 comprueba ambas cosas automáticamente.

Respondido 19 Jul 14, 19:07

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>

contestado el 02 de mayo de 16 a las 15:05

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 usar is(':visible') para comprobar la visibilidad de un elemento.

Respondido 16 Jul 17, 16:07

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 comprobar si el elemento es verdaderamente 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;
    }
});

respondido 20 mar '14, 14:03

Pero, ¿y si el CSS del elemento es como el siguiente?

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

So esta respuesta a la pregunta de Stack Overflow Cómo comprobar si un elemento está fuera de la pantalla también debe tenerse en cuenta.

contestado el 23 de mayo de 17 a las 14:05

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

respondido 22 nov., 14:14

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'); });

respondido 06 nov., 13:03

O, ya sabes, simplemente deshazte de todo el condicional y di $('elementToToggle').toggle('slow');... :) - Nbrooks

if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}

Respondido el 07 de diciembre de 13 a las 17:12

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.