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




obtener display (25)

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

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?


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


Esto puede funcionar:

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

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

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

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

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

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

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.


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


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>


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

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.


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.



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

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

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:


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

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>


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

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


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


Tenga en cuenta las pérdidas de memoria en Internet Explorer antes de Internet Explorer 9 , ya que la api.jquery.com/prop :

En Internet Explorer anterior a la versión 9, el uso de .prop () para establecer una propiedad del elemento DOM en un valor distinto a un simple valor primitivo (número, cadena o booleano) puede provocar pérdidas de memoria si la propiedad no se elimina (usando .removeProp ( )) antes de que el elemento DOM se elimine del documento. Para establecer valores de forma segura en objetos DOM sin pérdidas de memoria, use .data ().





javascript jquery dom visibility