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

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

7646
Philip Morton 7 oct. 2008 a las 17:03

27 respuestas

La mejor respuesta

Como 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

Usamos jQuery 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 devuelve falso.

9316
Ravi Makwana 11 oct. 2019 a las 04:19

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 una variable jQuery, y luego todo lo que necesita hacer es probar si hay una etiqueta en la pantalla, utilizando el if (!$('#thetagname').length) normal.

119
Lucas 26 mar. 2013 a las 22:12

Quizás 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
Abrar Jahin 2 may. 2016 a las 12:59

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

138
Adder 27 ago. 2019 a las 07:08

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

Pruebas (no es compatible con 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:hidden en 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 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 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
58
Peter Mortensen 28 abr. 2014 a las 18:10

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
cssimsek 5 nov. 2013 a las 23:32

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>
75
dippas 16 jul. 2017 a las 13:52

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 verificar / ocultar / mostrar elementos, si no planea usar los métodos .toggle() o .animate().

161
Lucas 19 mar. 2014 a las 08:15

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.

51
Peter Mortensen 19 jul. 2014 a las 15:23

Porque Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (como se describe para jQuery: Visible Selector) - 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;
    }
});
34
Andron 20 mar. 2014 a las 10:32

De ¿Cómo determino 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á actuando sobre un elemento en función de su visibilidad, puede incluir :visible o :hidden en la expresión del selector. Por ejemplo:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');
387
Chris 12 ene. 2016 a las 14:08

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 :visible ni :hidden se encargarán de esto, ya que ambos buscan la visualización según 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
    }
});
522
Andrii Abramov 26 jun. 2017 a las 07:12

Al probar un elemento contra el selector :hidden 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 con respecto al modelo de caja y el estilo calculado para el elemento. Incluso si ancho y alto no se establecen explícitamente a 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 alto 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
98
Al Foиce ѫ 6 ago. 2016 a las 08:53
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>

El método anterior considerará div2 visible mientras que :visible no. Pero lo anterior puede ser útil en muchos casos, especialmente cuando necesita encontrar si hay divisiones de error visibles en el elemento primario oculto porque en tales condiciones :visible no funcionará.

935
Shadow 2 ago. 2018 a las 06:57

Para verificar si no está visible, uso !:

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

O el siguiente también es el sam, que guarda 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')
}
67
Peter Mortensen 14 sep. 2013 a las 08:01

A menudo, al verificar si algo es visible o no, usted 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 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, 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" });
290
ecarrizo 27 abr. 2015 a las 20:10

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

60
Cameron 13 sep. 2016 a las 14:07

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

30
Peter Mortensen 22 nov. 2014 a las 11:23

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   */
}
211
webvitaly 14 dic. 2015 a las 21:32

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

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});
131
Community 26 oct. 2018 a las 07:33
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}
30
dcodesmith 7 dic. 2013 a las 13:51

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

37
dippas 16 jul. 2017 a las 13:56

Puede usar el hidden selector:

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

Y el visible selector:

// Matches all elements that are visible
$('element:visible')
1444
twernt 8 mar. 2018 a las 15:38

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

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

Entonces, esta respuesta a la pregunta de Stack Overflow Cómo verificar si un elemento está fuera de la pantalla también debe considerarse .

32
Community 23 may. 2017 a las 11:55

Esto puede funcionar:

expect($("#message_div").css("display")).toBe("none");
89
Lucas 6 mar. 2013 a las 06:41

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

  • Tienen un valor CSS display de 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 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 hacer .css("display") == 'none' no solo es más rápido, pero también devolverá la verificación de visibilidad correctamente.

Si desea verificar la visibilidad en lugar de mostrar, 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 utilizan :visible no pueden aprovechar el aumento de rendimiento proporcionado por el método DOM querySelectorAll() nativo. Para lograr el mejor rendimiento al usar :visible para 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 ves ... mostrar / ocultar el rendimiento (2010-05-04). Y use otros métodos para mostrar y ocultar elementos.

240
Pang 21 jun. 2017 a las 01:41

Simplemente puede 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")
134
Peter Mortensen 16 mar. 2013 a las 10:04