¿Cómo puedo saber si un elemento está visible con jQuery?

47

7

Ya que en jQuery es posible cambiar la visibilidad de un elemento, ¿Cómo puedo saber si un elemento está visible o no en tiempo de ejecución?

jachguate

Posted 2015-11-02T15:20:04.967

Reputation: 5 517

Answers

39

Es verdad que puedes usar is(":visible") pero por experiencia te recomiendo el uso de clases para que no tengas problemas a la hora de testear tus aplicaciones, ya que muchas librerías de tests no tienen los componentes que se prueban visibles y por mucho que tu componente haga hide() o show() jQuery seguirá indicando que no está visible, y el comportamiento de tus componentes será extraño. Esto me ha pasado con la librería de tests QUnit, de los autores de jQuery.

Lo que yo haría sería: $el.toggleClass("hide") o $el.addClass("hide").

Y comprobarlo con: !$el.hasClass("hide").

Además hay que tener cuidado al usar is(":visible") porque visibility: hidden u opacity: 0 se consideran visibles ya que ocupan espacio en el layout.

Ten en cuenta que mi solución es para comprobar si exclusivamente el elemento está visible. Puede darse el caso de que alguno de los padres no esté visible y por tanto no se vea. Si quieres comprobar algo así quizás es mejor que uses is(":visible") o !$(..).closest(".hide").

ccsakuweb

Posted 2015-11-02T15:20:04.967

Reputation: 693

Además los elementos tampoco figuran como :visibles si están en animación de fadeIn/Out o slideUp/Down.Danita 2015-12-15T23:41:34.260

2Este método podría fallar porque un elemento puede tener la clase hide y estar visible si hay otra regla que lo haga visible. Por ejemplo: <div class="hide" id="midiv">A</div> con el CSS .hide { display:none; } #midiv { display:block; }, el div tiene la clase hide pero es visible en el navegador porque la regla de #midiv tiene mayor especificidad.Alvaro Montoro 2016-01-20T19:26:58.607

35

Puedes usar la función is() junto con el selector :visible sobre un objeto jquery ya existente.

Por ejemplo, si tienes un div con id: "elemento" puedes saber si éste está visible o no de esta manera:

var esVisible = $("#elemento").is(":visible");

Para mas información revisa la documentación de is y :visible

Carlos Muñoz

Posted 2015-11-02T15:20:04.967

Reputation: 9 341

No soy experto en jQuery pero, aplica la inversa también? var estaOculto = $("#elemento").is(":hidden");César 2015-12-01T17:01:29.770

1@CésarBustíos si ya que internamente visible esta definido como !hidden: jQuery.expr.filters.visible = function( elem ) { return !jQuery.expr.filters.hidden( elem ); };Carlos Muñoz 2015-12-01T17:16:01.813

9

Al igual que emplea jquery el selector :visible en su ejemplo, lo puedes incorporar en la misma expresión de búsqueda del elemento

var visible = $("#element:visible").length > 0;

o hacer un filtrado

var visible = $("#element").filter(":visible").length > 0;

Estas formas de filtrado de elementos son particularmente útiles cuando vas a iterar sobre una lista de resultados

$(".elemento:visible").each(function() {
    ...
}

Aunque si sólo necesitas una respuesta booleana, como bien ha escrito Carlos Muñoz, puedes hacerlo así

var isVisible = $("#elemento").is(":visible");

I.G. Pascual

Posted 2015-11-02T15:20:04.967

Reputation: 209

5

Me vi involucrado en éste caso específico donde la solución inicial bastaría con:

if ($elementoDOM.is(':visible')){ console.log('el elemento está visible') }

PERO! mucho ojo que como decía un compañero en otros comentarios ésto no aplica para elementos que tengan la propiedad: opacity:0.

En lo personal lo más usado es con opacity ya que de tal manera se logra animar la aparición/desaparición de elementos en el DOM de una forma estética. Razón por la cual la instrucción precisa que me acaba de funcionar es:

if ($elementoDOM.css('opacity')==1) { ... } ó
if ($elementoDOM.css('opacity')==0) { ... }

tener cuidado de no colocar el numero (0,1) entre comillas dobles o simples!

Un saludo.

Jaime Diaz

Posted 2015-11-02T15:20:04.967

Reputation: 101

4

Podés usar lo siguiente

if($('#elemento').css('display') == 'none'){
   // Acción si el elemento no es visible
}else{
   // Acción si el elemento es visible
}

en el caso de que tambien queramos chequear la opacidad hacemos:

if($('#elemento').css('display') == 'none' || $('#elemento').css('opacity') == 0){
       // Acción si el elemento no es visible
}else{
       // Acción si el elemento es visible
}

antirockstars

Posted 2015-11-02T15:20:04.967

Reputation: 61

1También habría que mirar el valor de visibilityAlvaro Montoro 2015-12-01T18:40:14.330