75

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
  • 25,659
  • 7
  • 35
  • 61

5 Answers5

58

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

Chofoteddy
  • 5,975
  • 5
  • 25
  • 65
ccsakuweb
  • 893
  • 7
  • 5
  • Además los elementos tampoco figuran como `:visible`s si están en animación de fadeIn/Out o slideUp/Down. – Danita Dec 15 '15 at 23:41
  • 2
    Este 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: `
    A
    ` 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 Jan 20 '16 at 19:26
41

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
  • 12,864
  • 2
  • 42
  • 62
  • No soy experto en jQuery pero, aplica la inversa también? `var estaOculto = $("#elemento").is(":hidden");` – César Dec 01 '15 at 17:01
  • 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 Dec 01 '15 at 17:16
11

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");
Comunidad
  • 1
I.G. Pascual
  • 229
  • 2
  • 9
6

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.

jachguate
  • 25,659
  • 7
  • 35
  • 61
Jaime Diaz
  • 301
  • 3
  • 5
6

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
  • 81
  • 5