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

toggle jquery

Question

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

¿Cómo probarías si un elemento es visible u oculto?

Answer 1

Use la alternancia de clases, no la edición de estilos. . .

Usar clases designadas para "ocultar" elementos es fácil y también es uno de los métodos más eficientes. La alternancia de una clase "oculta" con un estilo de Display de "ninguno" tendrá un rendimiento más rápido que la edición de ese estilo directamente. Expliqué algo de esto bastante a fondo en la pregunta de desbordamiento de pila. Volviendo dos elementos visibles / ocultos en la misma división .

Mejores Prácticas y Optimización de JavaScript

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

• Acelere su Javascript (YouTube)

Answer 2

A menudo, al verificar si algo está visible o no, vas a seguir adelante de inmediato y harás otra cosa con él. El encadenamiento jQuery lo hace fácil.

Por lo tanto, si tiene un selector y desea realizar alguna acción en él solo si está visible u oculto, puede usar el filter(":visible") o el filter(":hidden") seguido de un encadenamiento con la acción que desea tomar.

Así que en lugar de una declaración if , 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 línea:

$(''#btnUpdate'').filter(":visible").animate({ width: "toggle" });

Answer 3

Al probar un elemento con :hidden selector :hidden en jQuery, debe considerarse que un elemento posicionado absoluto puede reconocerse como oculto aunque sus elementos secundarios estén visibles .

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

Los elementos pueden considerarse ocultos por varias razones: [...] su ancho y alto se establecen explícitamente en 0. [...]

Así que esto realmente tiene sentido en relación con el modelo de caja y el estilo computado para el elemento. Incluso si el ancho y el alto no están establecidos explícitamente en 0, pueden establecerse 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 cuadros de diseño, incluidos los de ancho y / o altura cero.

JSFiddle con jQuery 3.0.0-alpha1:

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

El mismo JS tendrá entonces esta salida:

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

Answer 4

Cómo funciona la visibilidad de elementos y jQuery ;

Un elemento se puede ocultar con la display:none , visibility:hidden u 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 "visibilidad: oculto", y aún ocupa espacio en el diseño; la única diferencia es que la opacidad permite hacer un elemento 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 conmutación jQuery útiles:

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

Answer 5

Dado que 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 la sugerencia de twernt , pero aplicada a un solo elemento; y coincide con el algoritmo recomendado en las preguntas frecuentes de jQuery

Answer 6

De ¿Cómo se determina 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 basado en su visibilidad, puede incluir :visible o :hidden en la expresión de selección. Por ejemplo:

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

Answer 7

Debe comprobar tanto ... Pantalla como visibilidad:

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

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

Answer 8

Debido a que los 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;
    }
});

Answer 9

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

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

a) Comprobar si el documento no está oculto.

b) Compruebe si un elemento tiene una anchura / altura / opacidad de cero o una 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 ancestros, por ejemplo: overflow:hidden / desplazamiento / un elemento sobre otro) o bordes de pantalla

d) Verifique si un elemento tiene una anchura / altura / opacidad de cero o display:none / visibilidad: oculta en 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 (Internet Explorer 5-11 modos de documento + Internet Explorer 8 en un 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

Answer 10

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>

Answer 11

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

• Tienen un valor de display CSS 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 todavía consumen espacio en el diseño.

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

Si desea verificar la visibilidad en lugar de la pantalla, debe 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 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 de CSS puro, luego use .filter(":visible") .

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

Answer 12

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

Answer 13

Esto puede funcionar:

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

Answer 14

Ninguna de estas respuestas aborda lo que entiendo que es la pregunta, que es lo que buscaba, "¿Cómo manejo los elementos que tienen visibility: hidden ?" . Ni :visible ni :hidden manejarán esto, ya que ambos buscan visualización según la documentación. Por lo que pude determinar, no hay ningún selector para manejar la visibilidad de CSS. Aquí es cómo 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
    }
});

Answer 15

Otra respuesta que debe tener en cuenta es 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 debe hacer es probar si hay una etiqueta de este tipo en la pantalla, utilizando la if (!$(''#thetagname'').length) normal if (!$(''#thetagname'').length) .

Answer 16

Para comprobar si no está visible lo uso ! :

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

Answer 17

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

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

Por lo tanto, esta respuesta a la pregunta de desbordamiento de pila también debe considerarse cómo verificar si un elemento está fuera de la pantalla .

Answer 18

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

Answer 19

Se activa el ejemplo de uso del cheque visible para adblocker:

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

Answer 20

Se puede crear una función para verificar los atributos de visibilidad / visualización a 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 de trabajo

Answer 21

Simplemente verifique la visibilidad buscando un valor booleano, como:

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

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

Answer 22

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>

Answer 23

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

Answer 24

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. Trabajos para elementos anidados.

3. Funciona para CSS y estilos en línea.

4. No requiere marco.

Answer 25

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

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

O puede simplificar lo mismo con lo siguiente.

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

Answer 26

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

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

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

Answer 27

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

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

Answer 28

$(''#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="http://www.chromefusion.com/wp-content/uploads/2012/06/chrome-logo.jpg" alt="" />

Fuente:

Blogger Plug n Play - Herramientas y widgets de jQuery: cómo ver si el elemento está oculto o visible usando jQuery

jsFiddle:

JSFiddle - ipsjolly - k4WWj

Answer 29

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

Answer 30

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