Como verifico se um elemento está oculto no jQuery?

É possível alternar a visibilidade de um elemento, usando as funções .hide(), .show()ou .toggle()?

Como você testaria se um elemento é visible ou hidden?

Como a pergunta se refere a um único elemento, esse código pode ser mais adequado:

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");

É o mesmo que a sugestão de twernt , mas aplicada a um único elemento; e corresponde ao algoritmo recomendado nas perguntas frequentes do jQuery .

Usamos o jQuery's is () para verificar o elemento selecionado com outro elemento, seletor ou qualquer objeto jQuery. Este método percorre os elementos DOM para encontrar uma correspondência que satisfaça o parâmetro passado. Ele retornará verdadeiro se houver uma correspondência, caso contrário, retornará falso.

Você pode usar o hiddenseletor:

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

E o visibleseletor:

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

if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // 'element' is hidden
}

O método acima não considera a visibilidade do pai. Para considerar os pais também, você deve usar .is(":hidden")ou .is(":visible").

Por exemplo,

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

O método acima será considerado div2visível enquanto :visiblenão estiver . Mas o acima exposto pode ser útil em muitos casos, especialmente quando você precisa descobrir se há algum erro divs visível no pai oculto, porque nessas condições :visiblenão funcionará.

Nenhuma dessas respostas aborda o que eu entendo ser a pergunta, que é o que eu estava procurando: "Como manejo itens que possuem visibility: hidden?" . Nem :visiblenem :hiddenvai lidar com isso, como ambos estão olhando para exibição de acordo com a documentação. Tanto quanto pude determinar, não há seletor para lidar com a visibilidade CSS. Aqui está como eu o resolvi (seletores jQuery padrão, pode haver uma sintaxe mais condensada):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});

De Como determino o estado de um elemento alternado?

Você pode determinar se um elemento está recolhido ou não, usando os seletores :visiblee :hidden.

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

Se você estiver simplesmente atuando em um elemento com base em sua visibilidade, poderá apenas incluir :visibleou :hiddenna expressão do seletor. Por exemplo:

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

Freqüentemente, ao verificar se algo está visível ou não, você irá imediatamente em frente e fará outra coisa com ele. O encadeamento jQuery facilita isso.

Portanto, se você possui um seletor e deseja executar alguma ação nele apenas se estiver visível ou oculto, poderá usar filter(":visible")oufilter(":hidden") segui-lo encadeando-o com a ação que deseja executar.

Então, em vez de uma ifdeclaração, assim:

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

Ou mais eficiente, mas ainda mais feia:

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

Você pode fazer tudo em uma linha:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });

O :visibleseletor de acordo com a documentação do jQuery :

• Eles têm um displayvalor CSS de none.
• Eles são elementos de formulário com type="hidden".
• Sua largura e altura são explicitamente definidas como 0.
• Um elemento ancestral está oculto, portanto, o elemento não é mostrado na página.

Elementos com visibility: hiddenou opacity: 0são considerados visíveis, pois ainda consomem espaço no layout.

Isso é útil em alguns casos e inútil em outros, porque se você deseja verificar se o elemento está visível ( display != none), ignorando a visibilidade dos pais, você verá que.css("display") == 'none' não é apenas mais rápido, mas também retornará a verificação de visibilidade corretamente.

Se você deseja verificar a visibilidade em vez da exibição, use: .css("visibility") == "hidden" .

Leve também em consideração as notas adicionais do jQuery :

Como :visibleé uma extensão jQuery e não faz parte da especificação CSS, as consultas que usam :visiblenão podem tirar proveito do aumento de desempenho fornecido pelo querySelectorAll()método DOM nativo . Para obter o melhor desempenho ao usar :visiblepara selecionar elementos, primeiro selecione os elementos usando um seletor CSS puro e, em seguida, use .filter(":visible").

Além disso, se você está preocupado com o desempenho, deve verificar Agora você me vê ... mostrar / ocultar o desempenho (04-05-2010). E use outros métodos para mostrar e ocultar elementos.

Isso funciona para mim e estou usando show()e hide()para tornar minha div oculta / visível:

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}

Como a visibilidade do elemento e o jQuery funcionam ;

Um elemento pode estar oculto com display:none, visibility:hiddenou opacity:0. A diferença entre esses métodos:

• display:none oculta o elemento e não ocupa espaço;
• visibility:hidden oculta o elemento, mas ainda ocupa espaço no layout;

• opacity:0oculta o elemento como "visibilidade: oculto" e ainda ocupa espaço no layout; a única diferença é que a opacidade permite tornar um elemento 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 úteis de alternância do jQuery:

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

Você também pode fazer isso usando JavaScript simples:

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 em qualquer lugar

2. Funciona para elementos aninhados

3. Funciona para CSS e estilos embutidos

4. Não requer uma estrutura

Eu usaria classe CSS .hide { display: none!important; } .

Por esconder / mostrar, eu ligo .addClass("hide")/.removeClass("hide"). Para verificar a visibilidade, eu uso.hasClass("hide") .

É uma maneira simples e clara de verificar / ocultar / mostrar elementos, se você não planeja usar .toggle()ou .animate()métodos.

Link de demonstração

$('#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="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="" width="300"/>

Fonte:

Blogger Plug n Play - Ferramentas e Widgets do jQuery: Como ver se o elemento está oculto ou visível usando o jQuery

Pode-se simplesmente usar o atributo hiddenou visible, como:

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

Ou você pode simplificar o mesmo com é como segue.

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

ebdivdeve estar definido como style="display:none;". Funciona para mostrar e ocultar:

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

Outra resposta que você deve levar em consideração é que, se você está ocultando um elemento, deve usar o jQuery , mas em vez de ocultá-lo, remova todo o elemento, mas copia o conteúdo HTML e a própria tag em uma variável do jQuery e, em seguida, tudo o que você precisa fazer é testar se existe uma tag na tela, usando o normal if (!$('#thetagname').length).

Ao testar um elemento contra o :hiddenseletor no jQuery, deve-se considerar que um elemento posicionado absoluto pode ser reconhecido como oculto, embora seus elementos filhos sejam visíveis .

Isso parece um tanto contra-intuitivo em primeiro lugar - embora uma análise mais detalhada da documentação do jQuery forneça as informações relevantes:

Os elementos podem ser considerados ocultos por vários motivos: [...] Sua largura e altura são explicitamente definidas como 0. [...]

Portanto, isso realmente faz sentido em relação ao modelo de caixa e ao estilo calculado para o elemento. Mesmo que a largura e a altura não sejam explicitamente definidas como 0, elas podem ser definidas implicitamente .

Veja o seguinte exemplo:

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>

Atualização para o jQuery 3.x:

Com o jQuery 3, o comportamento descrito mudará! Os elementos serão considerados visíveis se tiverem caixas de layout, incluindo as de largura e / ou altura zero.

JSFiddle com jQuery 3.0.0-alpha1:

http://jsfiddle.net/pM2q3/7/

O mesmo código JavaScript terá esta saída:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false

Isso pode funcionar:

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

Exemplo:

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

Para verificar se não está visível, eu uso !:

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

Ou a seguir, também é o sam, salvando o seletor jQuery em uma variável para obter melhor desempenho quando você precisar dele várias vezes:

var $book = $('#book')

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

Use alternância de classe, não edição de estilo. . .

Usar classes designadas para "ocultar" elementos é fácil e também um dos métodos mais eficientes. Alternar uma classe 'oculta' com um Displayestilo 'none' terá um desempenho mais rápido do que editar diretamente esse estilo. Expliquei isso bastante bem na pergunta Stack Overflow: Tornando dois elementos visíveis / ocultos na mesma div .

Práticas recomendadas e otimização de JavaScript

Aqui está um vídeo verdadeiramente esclarecedor de um Google Tech Talk do engenheiro front-end do Google, Nicholas Zakas:

• Acelere seu Javascript (YouTube)

Exemplo de uso da verificação visível do adblocker é ativado:

$(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" é um ID que o bloqueador de anúncios bloqueia. Portanto, verificando se está visível, você pode detectar se o bloqueador de anúncios está ativado.

Afinal, nenhum dos exemplos combina comigo, então escrevi o meu.

Testes (sem suporte do Internet Explorer filter:alpha):

a) Verifique se o documento não está oculto

b) Verifique se um elemento tem largura / altura / opacidade zero ou display:none/ visibility:hiddennos estilos embutidos

c) Verifique se o centro (também porque é mais rápido que testar todos os pixels / cantos) do elemento não está oculto por outro elemento (e todos os ancestrais, por exemplo: overflow:hidden / scroll / um elemento sobre outro) ou bordas da tela

d) Verifique se um elemento possui largura / altura / opacidade ou display:nonevisibilidade zero : oculto nos estilos computados (entre todos os ancestrais)

Testado em

Android 4.4 (navegador nativo / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (modos de documento do Internet Explorer 5-11 + Internet Explorer 8 em um máquina virtual) e 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;
    }
})();

Como usar:

is_visible(elem) // boolean

Você precisa verificar os dois ... Display e visibilidade:

if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
    // The element is not visible
} else {
    // The element is visible
}

Se procurarmos $(this).is(":visible"), o jQuery verificará as duas coisas automaticamente.

Talvez você possa fazer algo assim

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

Basta verificar a visibilidade, verificando um valor booleano, como:

if (this.hidden === false) {
    // Your code
}

Eu usei esse código para cada função. Caso contrário, você pode usar is(':visible')para verificar a visibilidade de um elemento.

Porque Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout(como descrito para jQuery: visible Selector ) - podemos verificar se o elemento é realmente visível desta maneira:

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

Mas e se o CSS do elemento for como o seguinte?

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

Portanto, esta resposta à pergunta Stack Overflow Como verificar se um elemento está fora da tela também deve ser considerado.

Uma função pode ser criada para verificar a visibilidade / exibir atributos, a fim de avaliar se o elemento é mostrado na interface do usuário ou não.

function checkUIElementVisible(element) {
    return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}

Violino de trabalho

Também aqui está uma expressão condicional ternária para verificar o estado do elemento e depois alterná-lo:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });

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