it-swarm-es.com

¿Cómo verifico si un elemento está oculto en jQuery?

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

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

7269
Philip Morton

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 sugerencia de twernt , pero aplicado a un solo elemento; y se coincide con el algoritmo recomendado en jQuery FAQ

8738
Tsvetomir Tsonev

Puede usar el hidden selector:

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

Y el selector visible :

// Matches all elements that are visible
$('element:visible')
1339
twernt
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, debes 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 divs de error visibles en el padre oculto porque en tales condiciones :visible no funcionará.

850
Mote

Ninguna de estas respuestas aborda lo que entiendo como la pregunta, que es lo que estaba buscando, "¿Cómo manejo los elementos que tienen visibility: hidden?" . Ni :visible ni :hidden manejarán esto, ya que ambos buscan la 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
    }
});
479
aaronLile

Desde¿Cómo puedo determinar 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ás actuando sobre un elemento basado en su visibilidad, puedes simplemente incluir :visible o :hidden en la expresión de selección. Por ejemplo:

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

A menudo, cuando verifica si hay algo visible o no, va a seguir adelante de inmediato y hará algo más con él. El encadenamiento de 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 filter(":visible") o filter(":hidden") seguido de encadenarlo con la acción que desea realizar.

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

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

  • Tienen un valor CSS display de none.
  • Son elementos de forma 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 hacer .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 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 marcarAhora me ve ... mostrar/ocultar rendimiento(2010-05-04). Y usa otros métodos para mostrar y ocultar elementos.

211
Pedro Rainho

Esto me funciona, 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   */
}
188
Abiy

Cómo funciona la visibilidad del elementoy jQuery;

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

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

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

Para ocultar/mostrar, llamo .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 métodos .toggle() o .animate().

146
Evgeny Levin

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.

141
Matt Brock

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

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

O puede simplificar lo mismo con es como sigue.

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

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

Fuente:  

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

111
Code Spy

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

110
think123

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

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

Cuando se prueba un elemento con el selector :hidden en jQuery, debe considerarse que un elemento posicionado absoluto puede reconocerse como oculto aunque sus elementos secundarios sean visibles .

Esto parece un tanto contraintuitivo en primer lugar, aunque al observar más detenidamente 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 lo que respecta al modelo de caja y el estilo computado para el elemento. Incluso si el ancho y el alto no están configurados explícitamente a 0, pueden configurarse 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
85
conceptdeluxe

Esto puede funcionar:

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

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>

63
Irfan DANISH

Para comprobar si no está visible, uso !:

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

O lo siguiente también es 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')
}
62
Matthias Wegtun

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. Cambiar a una clase 'oculto' con un estilo Display de 'ninguno' tendrá un rendimiento más rápido que editar ese estilo directamente. Expliqué algo de esto bastante a fondo en la pregunta de desbordamiento de pila Girar dos elementos visibles/ocultos en el mismo div.


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:

59
Lopsided

Ejemplo de uso de visible check for adblocker 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 una ID que bloquea adblocker. Por lo tanto, si está visible, puede verificar si el bloqueador de anuncios está activado.

56
Roman Losev

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

Pruebas (no admite Internet Explorer filter:alpha):

a) Comprobar si el documento no está oculto.

b) Compruebe si un elemento tiene una anchura/altura/opacidad cero o display:none/visibility:hidden en los 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/scroll/one element sobre otro) o los bordes de la pantalla

d) Verifique si un elemento tiene una anchura/altura/opacidad cero o display:none/visibilidad: oculto 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 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
55
Aleko

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.

50
Premshankar Tiwari

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>

38
Mathias Stavrou

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

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.

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

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

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

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

30
RN Kushwaha

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

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

Trabajando Fiddle

29
V31
.is(":not(':hidden')") /*if shown*/
25
Kareem

Busqué esto, y ninguna de las respuestas es correcta para mi caso, así que he creado una función que devolverá falsa si los ojos de uno no pueden ver el elemento.

jQuery.fn.extend({
  isvisible: function() {
    //
    //  This function call this: $("div").isvisible()
    //  Return true if the element is visible
    //  Return false if the element is not visible for our eyes
    //
    if ( $(this).css('display') == 'none' ){
        console.log("this = " + "display:none");
        return false;
    }
    else if( $(this).css('visibility') == 'hidden' ){
        console.log("this = " + "visibility:hidden");   
        return false;
    }
    else if( $(this).css('opacity') == '0' ){
        console.log("this = " + "opacity:0");
        return false;
    }   
    else{
        console.log("this = " + "Is Visible");
        return true;
    }
  }  
});
19
lmcDevloper
if($('#id_element').is(":visible")){
   alert('shown');
}else{
   alert('hidden');
}
18
Prabhagaran

Así es como jQuery resuelve internamente este problema:

jQuery.expr.pseudos.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

Si no usa jQuery, puede aprovechar este código y convertirlo en su propia función:

function isVisible(elem) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

La cual isVisible devolverá true siempre que el elemento sea visible.

15
Oriol

Simplemente verifique si ese elemento es visible y devolverá un boolean , jQuery oculta los elementos agregando no mostrar ninguno al elemento, así que si desea usar JavaScript puro, todavía puede hacer eso, por ejemplo:

if (document.getElementById("element").style.display === 'block') { 
  // your element is visible, do whatever you'd like
}

Además, puedes usar jQuery como parece que usa el resto de tu código y tienes un bloque de código más pequeño, como el siguiente en jQuery, haz lo mismo para ti:

if ($(element).is(":visible")) { 
    // your element is visible, do whatever you'd like
};

También utilizando el método css en jQuery puede resultar lo mismo:

if ($(element).css('display')==='block') {
    // your element is visible, do whatever you'd like
}

También en el caso de verificar la visibilidad y la visualización, puede hacer lo siguiente:

if ($(this).css("display")==="block"||$(this).css("visibility")==="visible") {
   // your element is visible, do whatever you'd like
}
14
Alireza

Hay bastantes formas de comprobar si un elemento está visible u oculto en jQuery.

Demo HTML para referencia de ejemplo

<div id="content">Content</div>
<div id="content2" style="display:none">Content2</div>

Use el selector de filtro de visibilidad $('element:hidden') o $('element:visible')

  • $('element:hidden'): selecciona todos los elementos que están ocultos.

    Example:
       $('#content2:hidden').show();
    
  • $('element:visible'): selecciona todos los elementos que son visibles.

    Example:
       $('#content:visible').css('color', '#EEE');
    

Lea más en http://api.jquery.com/category/selectors/visibility-filter-selectors/

Usa is() Filtering

    Example:
       $('#content').is(":visible").css('color', '#EEE');

    Or checking condition
    if ($('#content').is(":visible")) {
         // Perform action
    }

Lea más en http://api.jquery.com/is/

14
Arun Karnawat

Como hide(), show() y toggle() adjunta inline css (display: none o display: block) al elemento. Del mismo modo, podemos usar fácilmente el operador ternario para verificar que el elemento meteorológico esté oculto o visible al verificar la pantalla css.

ACTUALIZACIÓN:

  • También debe comprobar si el elemento css está configurado para visibilidad: "visible" o visibilidad: "oculto"
  • El elemento también será visible si la propiedad de visualización se establece en bloque en línea, bloque, flexión.

Así que podemos comprobar la propiedad del elemento que la hace invisible. Así que son display: none y visibility: "hidden";

Podemos crear un objeto para verificar la propiedad responsable de ocultar el elemento:

var hiddenCssProps = {
display: "none",
visibility: "hidden"
}

Podemos verificar haciendo un bucle a través de cada valor clave en la coincidencia de objetos si la propiedad del elemento busca coincidencias clave con el valor de propiedad oculta.

var isHidden = false;
for(key in hiddenCssProps) {
  if($('#element').css(key) == hiddenCssProps[key]) {
     isHidden = true;
   }
}

Si desea verificar propiedades como elemento alto: 0 o ancho: 0 o más, puede extender este objeto y agregarle más propiedades y puede verificar.

Gracias a @Krzysztof Przygoda por recordarme otras propiedades de visualización.

14
No one

Puedes usar esto:

$(element).is(':visible');

Código de ejemplo

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

    $("#visiblity").click(function()
    {
       if( $('#content').is(':visible') )
       {
          alert("visible"); // Put your code for visibility
       }
       else
       {
          alert("hidden");
       }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<p id="content">This is a Content</p>

<button id="toggle">Toggle Content Visibility</button>
<button id="visibility">Check Visibility</button>

13
Abrar Jahin

Esta es una opción para verificar si la etiqueta es visible o no.

 // using a pure CSS selector  
   if ($('p:visible')) {  
      alert('Paragraphs are visible (checked using a CSS selector) !');  
   };  
  
   // using jQuery's is() method  
   if ($('p').is(':visible')) {  
      alert('Paragraphs are visible (checked using is() method)!');  
   };  
  
   // using jQuery's filter() method  
   if ($('p').filter(':visible')) {  
      alert('Paragraphs are visible (checked using filter() method)!');  
   };  
  
   // you can use :hidden instead of :visible to reverse the logic and check if an element is hidden  
   // if ($('p:hidden')) {  
   //    do something  
   // };  

11
Sangeet Shah

Solo quiero aclarar que, en jQuery,

Los elementos pueden ser considerados ocultos por varias razones:

  • Tienen un valor de visualización de CSS de ninguno.
  • Son elementos de formulario con tipo = "ocultos".
  • 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 visibilidad: oculto o opacidad: 0 se consideran visibles, ya que todavía consumen espacio en el diseño. Durante las animaciones que ocultan un elemento, el elemento se considera visible hasta el final de la animación.

Fuente: : Selector oculto | Documentación API jQuery

if($('.element').is(':hidden')) {
  // Do something
}
10
Sky Yip

Solo puedes agregar una clase cuando sea visible. Agrega una clase, show. A continuación, compruebe si tiene una clase:

$('#elementId').hasClass('show');

Devuelve true si tienes la clase show.

Agrega CSS como este:

.show{ display: block; }
9
Sahan

Hay demasiados métodos para comprobar si hay elementos ocultos. Esta es la mejor opción (te acabo de recomendar):

Usando jQuery, haga un elemento, "display: none", en CSS para oculto.

La cuestión es:

$('element:visible')

Y un ejemplo de uso:

$('element:visible').show();
7

Simplemente verifique el atributo display (o visibility dependiendo del tipo de invisibilidad que prefiera). Ejemplo:

if ($('#invisible').css('display') == 'none') {
    // This means the HTML element with ID 'invisible' has its 'display' attribute set to 'none'
}
5
Antoine Auffray

Puedes usar el 

$( "div:visible" ).click(function() {
  $( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
  $( "div:hidden" ).show( "fast" );
});

Documentación de API: https://api.jquery.com/visible-selector/

4
Wolfack

1 • solución jQuery

Métodos para determinar si un elemento es visible en JQuery.

<script>
if ($("#myelement").is(":visible")){alert ("#myelement is visible");}
if ($("#myelement").is(":hidden")){alert ("#myelement is hidden"); }
</script>

Repetir todo visible div hijos del elemento id 'myelement':

$("#myelement div:visible").each( function() {
 //Do something
});

Asomado a la fuente de jQuery

Así es como jQuery implementa esta característica:

jQuery.expr.filters.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

2 • Cómo verificar si un elemento está fuera de pantalla - CSS

Al utilizar Element.getBoundingClientRect (), puede detectar fácilmente si su elemento está dentro de los límites de su ventana gráfica (es decir, en pantalla o fuera de pantalla):

jQuery.expr.filters.offscreen = function(el) {
  var rect = el.getBoundingClientRect();
  return (
           (rect.x + rect.width) < 0 
             || (rect.y + rect.height) < 0
             || (rect.x > window.innerWidth || rect.y > window.innerHeight)
         );
};

Entonces podrías usar eso de varias maneras:

// returns all elements that are offscreen
$(':offscreen');

// boolean returned if element is offscreen
$('div').is(':offscreen');

Si usa Angular, verifique: No use el atributo oculto con Angular

3
Lyes CHIOUKH
if($("h1").is(":hidden")){
    // your code..
}
3
cbertelegni

Algunas veces, si desea verificar si el elemento está visible en la página, dependiendo de la visibilidad de su padre, puede verificar si width y height, de element, son iguales a 0, ambos.

jQuery

$element.width() === 0 && $element.height() === 0

Vainilla

element.clientWidth === 0 && element.clientHeight === 0

O

element.offsetWidth === 0 && element.offsetHeight === 0

2
Profesor08

Puede usar una clase css cuando está visible u oculta al alternar la clase.

.show{ display :block; }

Establezca su jQuery toggleClass() o addClass() o removeClass();.

Como ejemplo,

jQuery('#myID').toggleClass('show')

El código anterior agregará show css class cuando el elemento no tenga show y se eliminará cuando tenga show class.

Y cuando está comprobando si está visible o no, puede seguir este código jQuery,

jQuery('#myID').hasClass('show'); 

El código anterior devolverá un valor booleano (verdadero) cuando el elemento #myID tenga nuestra clase (show) y false cuando no tenga la clase (show).

0
Sahan

En lugar de escribir una event para cada element, haz esto:

$('div').each(function(){
  if($(this).css('display') === 'none'){
    $(this).css({'display':'block'});
  }
});

También puedes usarlo en las entradas:

$('input').each(function(){
  if($(this).attr('type') === 'hidden'){
    $(this).attr('type', 'text');
  }
});
0
user10145552

Puedes hacerlo:

isHidden = function(element){
    return (element.style.display === "none");
};

if(isHidden($("element")) == true){
    // something
}
0
user8903269

solución jQuery, una pregunta bastante antigua, pero aún así me he dado cuenta de que puedo dar una respuesta un poco mejor para aquellos que también quieren cambiar el texto del botón.

$(function(){
  $("#showHide").click(function(){
    var btn = $(this);
    $("#content").toggle(function () {
      btn.text($(this).css("display") === 'none' ? "Show" : "Hide");
    });
   });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="showHide">Hide</button>
<div id="content">
  <h2>Some content</h2>
  <p>
  What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </p>
</div>

0
Muhammad
$('someElement').on('click', function(){ $('elementToToggle').is(':visible')
0
user6119825

Para ser justos la pregunta precede a esta respuesta. Lo agrego no para criticar al OP, sino para ayudar a cualquiera que todavía haga esta pregunta.

La forma correcta de determinar si algo está visible es consultar su modelo de vista. Si no sabe lo que eso significa, entonces está a punto de embarcarse en un viaje de descubrimiento que hará que su trabajo sea mucho más difícil.

Aquí hay una descripción general de model-view-viewmodel architecture (MVVM).

KnockoutJS es una biblioteca de enlace que te permitirá probar estas cosas sin tener que aprender un marco completo.

Y aquí hay algunos JS y un DIV que pueden o no ser visibles.

<html><body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script>
var vm = {
  IsDivVisible: ko.observable(true);
}
vm.toggle = function(data, event) {
  //get current visibility state for the div
  var x = IsDivVisible();
  //set it to the opposite
  IsDivVisible(!x);
}
ko.applyBinding(vm);
</script>
<div data-bind="visible: IsDivVisible">Peekaboo!</div>
<button data-bind="click: toggle">Toggle the div's visibility</button>
</body></html>

Observe que la función de alternancia no consulta el DOM para determinar la visibilidad del div, consulta el modelo de vista.

0
Peter Wone