Como verificar se um elemento está oculto no jQuery

Ao trabalhar com jQuery, você frequentemente precisará determinar se um elemento está visível ou oculto na sua página. O jQuery fornece vários métodos eficientes para verificar o estado de visibilidade de um elemento.

Usando o Seletor :hidden

A maneira mais simples de verificar se um elemento está oculto é usando o:hiddenselector com ois()método:

if ($( #myElement ).is( :hidden )) { console.log( Element is hidden ); }

Um elemento é considerado oculto se atender a qualquer um destes critérios: CSS display é none, width e height são 0, ou um elemento pai está oculto.

Usando o Seletor :visible

🎨 AI Generated: Usando o Seletor :visible

Alternativamente, você pode verificar se um elemento está visível:

if ($( #myElement ).is( :visible )) { console.log( Element is visible ); } else { console.log( Element is hidden ); }

Verificando a Propriedade CSS Display

Para um controle mais específico, verifique a propriedade CSS display diretamente:

if ($( #myElement ).css( display ) === none ) { console.log( Element has display: none ); }

Verificando a Propriedade Visibility

🎨 AI Generated: Checking Visibility Property

Para verificar se um elemento temvisibility: hidden:

if ($( #myElement ).css( visibility ) === hidden ) { console.log( Element has visibility: hidden ); }

Best Practices

Usar:hiddene:visiblepara verificações gerais de visibilidade. Para aplicações críticas de desempenho com muitos elementos, armazene em cache seus seletores jQuery e considere usar alternativas de vanilla JavaScript comooffsetParent or getComputedStyle().

Lembre-se de que:hiddennão detecta elementos comopacity: 0ou posicionado fora da tela, então escolha seu método com base em seus requisitos específicos.