javascript - ¿Cómo compruebo si un elemento está oculto en jQuery?

¿Cómo cambio la visibilidad de un elemento usando .hide(), .show() o .toggle()?

¿Cómo pruebo si un elemento es visible o oculto?

Respuesta #1

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 is() de jQuery para verificar el elemento seleccionado con otro elemento, selector o cualquier objeto jQuery. Este método recorre los elementos del DOM para encontrar una coincidencia que satisfaga el parámetro pasado. Devolverá true si hay una coincidencia; de lo contrario, devolverá false.

Respuesta #2

Puedes usar el selector hidden:

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

Y el selector visible:

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

Respuesta #3

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 al padre, deberías 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 considerará div2 visible mientras que :visible no lo hará. Pero lo anterior podría ser útil en muchos casos, especialmente cuando necesitas averiguar si hay algún div de error visible en el padre oculto porque en tales condiciones :visible no funcionará.

Respuesta #4

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

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});

Respuesta #5

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

Puedes determinar si un elemento está colapsado o no usando los selectores :visible y :hidden.

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

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

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

Respuesta #6

A menudo, al comprobar si algo es visible o no, vas a ir directamente de inmediato y hacer algo más con ello. La encadenación de jQuery hace esto fácil.

Así que si tienes un selector y quieres realizar alguna acción sobre él solo si está visible o oculto, puedes usar filter(":visible") o filter(":hidden") seguido de encadenarlo con la acción que quieras realizar.

Así que en lugar de una declaración if, así:

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

O más eficientemente:

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

Respuesta #7

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

• Tienen un valor de CSS display de none.
• Son elementos de formulario con type="hidden".
• Su ancho y alto están establecidos 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 ocupan espacio en el diseño.

Esto es útil en algunos casos e inútil en otros, porque si quieres comprobar si el elemento es visible (display != none), ignorando la visibilidad de los padres, descubrirás que hacer .css("display") == 'none' no solo es más rápido, sino que también devolverá la verificación de visibilidad correctamente.

Si quieres comprobar la visibilidad en lugar de la visualización, deberías usar: .css("visibility") == "hidden".

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

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

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

Respuesta #8

Cómo funciona la visibilidad de los elementos y jQuery;

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 "visibility:hidden", y todavía 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 de alternancia útiles de jQuery:

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

Respuesta #9

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

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

Respuesta #10

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 framework

Respuesta #11

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

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

Es una manera simple y clara de comprobar/ocultar/mostrar elementos, si no planeas usar los métodos .toggle() o .animate().

Respuesta #12

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 usando jQuery

Respuesta #13

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

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

Respuesta #14

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

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

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

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

Respuesta #15

Otra respuesta que deberías tener en cuenta es que si estás ocultando un elemento, deberías usar jQuery, pero en lugar de ocultarlo realmente, eliminas todo el elemento, pero copias su contenido HTML y la propia etiqueta en una variable de jQuery, y luego todo lo que necesitas hacer es comprobar si hay tal etiqueta en la pantalla, usando el normal if (!$ ('#thetagname').length).

Respuesta #16

Al probar un elemento con el selector :hidden en jQuery, se debe considerar que un elemento posicionado de manera absoluta puede ser reconocido como oculto aunque sus elementos hijos sean visibles.

Esto parece algo contraintuitivo en primer lugar, aunque al echar un vistazo más de cerca a la documentación de jQuery se obtiene la información relevante:

Los elementos pueden considerarse ocultos por varias razones: [...] Su ancho y alto están establecidos explícitamente en 0. [...]

Así que esto en realidad tiene sentido en relación con el modelo de caja y el estilo calculado para el elemento. Incluso si el ancho y la altura no se establecen explícitamente en 0, pueden estar establecidos implícitamente.

Echa 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 cualquier caja de diseño, incluyendo aquellas de ancho y/o alto cero.

JSFiddle con jQuery 3.0.0-alpha1:

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

El mismo código de JavaScript tendrá entonces esta salida:

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

Respuesta #17

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

Respuesta #18

$(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>

Respuesta #19

Para comprobar si no es visible, uso !:

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

O lo siguiente también es lo mismo, guardando el selector de jQuery en una variable para tener un mejor rendimiento cuando lo necesites varias veces:

var $book = $('#book')

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

Respuesta #20

Usa 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. Alternar una clase 'hidden' con un estilo Display de 'none' será más rápido que editar ese estilo directamente. Expliqué parte de esto bastante a fondo en la pregunta de Stack Overflow Turning two elements visible/hidden in the same div.

Mejores Prácticas y Optimización de JavaScript

Aquí hay un video realmente esclarecedor de una charla tecnológica de Google por el ingeniero de front-end de Google Nicholas Zakas:

• Acelera tu Javascript (YouTube)

Respuesta #21

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

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

a) Verifique si el documento no está oculto

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

c) Comprueba 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 elementos ascendentes, ejemplo: overflow:hidden/desplazamiento/un elemento sobre otro) o los bordes de la pantalla

d) Verificar si un elemento tiene ancho/alto/opacidad cero o display:none/visibility:hidden en los 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 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;
    }
})();

Cómo usar:

is_visible(elem) // boolean

Respuesta #22

Ejemplo de uso del chequeo visible para cuando 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 el bloqueador de anuncios bloquea. Así que al comprobar si es visible, puedes detectar si el bloqueador de anuncios está activado.

Respuesta #23

Necesitas revisar ambos. Pantalla así como visibilidad:

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

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

Respuesta #24

$(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>

Respuesta #25

Simplemente verifica la visibilidad comprobando un valor booleano, como:

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

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

Respuesta #26

Porque Los elementos con visibility: hidden u opacity: 0 se consideran visibles, ya que todavía ocupan espacio en el diseño (como se describe para el selector :visible de jQuery) - podemos comprobar si un 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;
    }
});

Respuesta #27

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

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

Así que esta respuesta a la pregunta de Stack Overflow Cómo comprobar si un elemento está fuera de pantalla también debería ser considerada.

Respuesta #28

Se puede crear una función para verificar los atributos de visibilidad/mostrar con el fin de 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'));
}

Violín en funcionamiento

Respuesta #29

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

Respuesta #30

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