javascript - saber - verificar display jquery




¿Cómo compruebo si un elemento está oculto en jQuery? (20)

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?


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:


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

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

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


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.


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

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>


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.


Esto puede funcionar:

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

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

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


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.


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


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>


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

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

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() .


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


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





visibility