javascript - propriedade - verificar se um elemento está visivel




Como faço para verificar se um elemento está oculto no jQuery? (20)

É 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?


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

Usando classes designadas para elementos "escondidos" é fácil e também um dos métodos mais eficientes. Alternar uma classe 'hidden' com um estilo de Display 'none' será mais rápido do que editar esse estilo diretamente. Expliquei um pouco disso bastante na questão do . Tornando dois elementos visíveis / ocultos na mesma div .

Melhores Práticas e Otimização de JavaScript

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


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

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.


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

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


De Como determino o estado de um elemento alternado?

Você pode determinar se um elemento é recolhido ou não usando os seletores :visible e :hidden .

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

Se você está simplesmente agindo em um elemento com base em sua visibilidade, basta incluir :visible ou :hidden na expressão do seletor. Por exemplo:

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

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>


Isso pode funcionar:

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


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

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

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.


Para verificar se não é visível eu uso ! :

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

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

var $book = $('#book')

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

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

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

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


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.


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


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


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