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




css propriedade (25)

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


Answers

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

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.


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

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:


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

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á.


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

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

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>



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.


Isso pode funcionar:

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

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

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

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

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>


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


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


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

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ê pode usar o seletor hidden :

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

E o seletor visible :

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

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 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   */
}

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


Uma maneira comum de escrever um método contains em JavaScript é:

if (!String.prototype.contains) {
    String.prototype.contains = function (arg) {
        return !!~this.indexOf(arg);
    };
}

O operador de negação bit a bit ( ~ ) é usado para transformar -1 em 0 (falsey) e todos os outros valores serão diferentes de zero (truthy).

Os operadores de negação booleana dupla são usados ​​para converter o número em um booleano.







javascript jquery dom visibility