javascript visivel Como faço para verificar se um elemento está oculto no jQuery?




verificar se um elemento está visivel (24)

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

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

Como você testaria se um elemento é visível ou oculto?


Uma função pode ser criada para verificar os atributos de visibilidade / exibição, 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


Outra resposta que você deve colocar em consideração é se você está escondendo um elemento, você deve usar o jQuery , mas ao invés de escondê-lo, você remove o elemento inteiro, mas copia seu conteúdo HTML e a própria tag em uma variável jQuery e então tudo o que você precisa fazer é testar se existe uma tag na tela, usando o normal if (!$('#thetagname').length) .


Você precisa verificar ambos ... Exibição e visibilidade:

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

Se verificarmos por $(this).is(":visible") , o jQuery verifica as duas coisas automaticamente.


Afinal, nenhum dos exemplos me convém, então eu escrevi o meu próprio.

Testes (sem suporte do filter:alpha 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:hidden em estilos inline

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

d) Verifique se um elemento tem zero largura / altura / opacidade ou display:none / visibilidade: oculto em 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), 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

ebdiv deve ser definido para style="display:none;" . Ele funciona tanto para mostrar quanto para ocultar:

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

$('#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="" />

Fonte:

Plug and Play do Blogger - ferramentas e widgets do jQuery: como ver se o elemento está oculto ou visível usando jQuery

jsFiddle:

JSFiddle - ipsjolly - k4WWj


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

// Checks css 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 aplicado a um único elemento; e corresponde ao algoritmo recomendado no FAQ do jQuery


Ao testar um elemento em :hidden seletor :hidden em jQuery, deve-se considerar que um elemento de posição absoluta pode ser reconhecido como oculto, embora seus elementos filhos estejam visíveis .

Isso parece um pouco contra-intuitivo em primeiro lugar - embora ter um olhar mais atento à 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. [...]

Então isso realmente faz sentido no que diz respeito ao modelo de caixa e ao estilo computado para o elemento. Mesmo que largura e altura não sejam definidas explicitamente como 0, elas podem ser configuradas implicitamente .

Dê uma olhada no 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 irá 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 JS terá então esta saída:

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

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 todos os lugares

  2. Funciona para elementos aninhados

  3. Funciona para CSS e estilos inline

  4. Não requer um quadro


Como a visibilidade do elemento e o jQuery funcionam ;

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

  • display:none oculta o elemento e não ocupa espaço algum;
  • visibility:hidden oculta o elemento, mas ainda ocupa espaço no layout;
  • opacity:0 oculta 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 de alternância do jQuery úteis:

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

Isso pode funcionar:

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

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

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

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

Pode-se simplesmente usar o atributo hidden ou visible , como:

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

Ou você pode simplificar o mesmo com o seguinte.

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

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>


O seletor :visible acordo com a documentação do jQuery :

  • Eles têm um valor de display 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 é oculto, portanto, o elemento não é mostrado na página.

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

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

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

Também leve em consideração as notas adicionais do jQuery :

Como :visible é uma extensão do jQuery e não faz parte da especificação CSS, as consultas que usam :visible não podem aproveitar o aumento de desempenho fornecido pelo método querySelectorAll() nativo do DOM. Para obter o melhor desempenho ao usar :visible para 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, você deve verificar Agora você me vê ... mostrar / ocultar o desempenho (2010-05-04). E use outros métodos para mostrar e ocultar elementos.


Exemplo de uso da verificação visível para o 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 bloqueia o adblocker. Portanto, se for verificado, você poderá detectar se o adblocker está ativado.


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>


Muitas vezes, ao verificar se algo está visível ou não, você vai imediatamente à frente e faz outra coisa com ele. O encadeamento do jQuery facilita isso.

Portanto, se você tiver um seletor e quiser executar alguma ação nele apenas se estiver visível ou oculto, use filter(":visible") ou filter(":hidden") seguido de encadeamento com a ação que deseja leva.

Então, ao invés de uma declaração if , 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" });

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

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

Para esconder / mostrar, eu chamo .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 os .toggle() ou .animate() .


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.


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 o pai 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 considerará div2 visible while :visible not. Mas o acima pode ser útil em muitos casos, especialmente quando você precisa descobrir se há algum erro divs visível no pai oculto porque em tais condições :visible não funcionará.





visibility