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

¿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?

Como 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 se aplica 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. Volverá verdadero si hay una coincidencia, de lo contrario devolverá falso.

Puedes usar el hiddenselector:

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

Y el visibleselector:

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

if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // 'element' is hidden
}

El método anterior no considera la visibilidad del padre. Para considerar también a los padres, 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 se considerará div2visible mientras :visibleno. Pero lo anterior podría ser útil en muchos casos, especialmente cuando necesita encontrar si hay divisiones de error visibles en el padre oculto porque en tales condiciones :visibleno funcionará.

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 :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 CSS. Así es como 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
    }
});

De ¿Cómo se determina el estado de un elemento toggled?

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

A menudo, cuando se verifica si algo es visible o no, usted va a seguir inmediatamente y hacer algo más con él. El encadenamiento de jQuery lo hace fácil.

Por lo tanto, si tiene un selector y desea realizar alguna acción sobre é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, así:

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

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

• Tienen un displayvalor CSS 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.

Los elementos con visibility: hiddeno opacity: 0se 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 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 :

Debido a que :visiblees una extensión jQuery y no forma parte de la especificación CSS, las consultas que se utilizan :visibleno pueden aprovechar el aumento de rendimiento proporcionado por el querySelectorAll()método DOM nativo . Para lograr el mejor rendimiento cuando se usa :visiblepara seleccionar elementos, primero seleccione los elementos usando un selector CSS puro, luego use .filter(":visible").

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

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

Cómo funciona la visibilidad del elemento y jQuery ;

Un elemento podría 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: oculto", y todavía ocupa espacio en el diseño; la única diferencia es que la opacidad le permite a uno 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 alternar jQuery:

  $('.click').click(function() {
    $('.target').toggle();
  });
  
  $('.click').click(function() {
    $('.target').slideToggle();
  });
  
  $('.click').click(function() {
    $('.target').fadeToggle();
  });

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

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

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

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

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 jQuery: cómo ver si Element está oculto o es visible usando jQuery

Simplemente se puede 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")

ebdivdebe ajustarse a style="display:none;". Funciona tanto para mostrar como para ocultar:

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

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 tal etiqueta en la pantalla, utilizando la normal if (!$('#thetagname').length).

Al probar un elemento contra el :hiddenselector en jQuery, se debe considerar que un elemento en posición absoluta 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 realmente tiene sentido en lo que respecta al modelo de caja y el estilo calculado para el elemento. Incluso si ancho y 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

Esto puede funcionar:

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

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>

Para verificar si no está visible, uso !:

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

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

Use alternar clases, no editar estilos. . .

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

Mejores prácticas y optimización de JavaScript

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

• Acelera tu Javascript (YouTube)

Ejemplo de uso de la 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 el bloqueador de anuncios. Entonces, verificando si está visible, puede detectar si el bloqueador de anuncios está activado.

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

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

a) Verifique 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) Verifique 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 sus antepasados, por ejemplo: overflow:hidden / scroll / un elemento sobre otro) o los bordes de la pantalla

d) Compruebe 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

Debe verificar ambos ... Pantalla y 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.

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>

Simplemente verifique la visibilidad buscando 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 verificar la visibilidad de un elemento.

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

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

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

Entonces, esta respuesta a la pregunta de desbordamiento de pila también debe considerarse si se debe verificar si un elemento está fuera de la pantalla .

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

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

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