3

Como posso fazer para saber se um determinado elemento não está visível com Javascript puro?

Eu sei fazer isso com jQuery, que é assim:

 $('.btn').click(function () {
      $('#box').is(':visible') ? $('#box').hide() : $('#box').show();
 });

Mas e em Javascript puro? Qual é o meio mais eficiente de saber se um elemento no DOM está visível ou não?

3
  • Qual é o problema com a pergunta? Poderia explicar? Commented 29/06/2016 às 19:23
  • 4
    aparentemente é o if(user == 4995) downvote();
    – Randrade
    Commented 29/06/2016 às 19:25
  • 2
    R: Use jQuery :p
    – Jéf Bueno
    Commented 29/06/2016 às 19:46

4 Respostas 4

4

Discordo da outra resposta, style.display é apenas para propriedades inline, pra isto você terá que usar getComputedStyle, currentStyle, o atributo type="hidden" no elemento <input>.

Com getComputedStyle (e currentStyle) conseguimos verificar as propriedade visibility e display, tanto no atributo style="" quanto na tag <style>, quanto em propriedades dentro de arquivos CSS que estejam afetando elementos na atual página.

function getStyle(elem, prop)
{
    if (elem.currentStyle) { //IE8

        //Converte hifens para camelCase
        prop = prop.replace(/-([a-z])/gi, function (value) {
            return value.toLowerCase();
        });
        
        return elem.currentStyle[prop];
    } else if (window.getComputedStyle) {//Navegadores modernos


        //Converte camelCase para hifens
        prop = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
        
        return window.getComputedStyle(elem, null).getPropertyValue(prop);
    }
}

function isVisible(elem)
{
    //Verifica inputs
    if (/^(input|select|textarea)$/i.test(elem.nodeName) && elem.type === "hidden") {
        return false;
    }

    //Verifica a propriedade visibility
    if (getStyle(elem, "visibility") === "hidden") {
        return false;
    }

    //Verifica a propriedade display
    if (getStyle(elem, "display") === "none") {
        return false;
    }

    return true;
}

function isHidden(elem)
{
     return !isVisible(elem);
}
#ELEMENTO_1 {
    visibility: hidden;
}
#ELEMENTO_3 {
    display: none;
}
<div id="ELEMENTO_1">Invisivel visibility: hidden</div>
<button onclick="console.log(isVisible(document.getElementById('ELEMENTO_1')));">Testar visibility: hide</button>
<hr>

<div id="ELEMENTO_2">Visivel</div>
<button onclick="console.log(isVisible(document.getElementById('ELEMENTO_2')));">Testar Visivel</button>
<hr>

<div id="ELEMENTO_3">Invisivel display: none</div>
<button onclick="console.log(isVisible(document.getElementById('ELEMENTO_3')));">Testar display: none</button>
<hr>

<input type="hidden" id="ELEMENTO_4">
<button onclick="console.log(isVisible(document.getElementById('ELEMENTO_4')));">Testar input[type=hidden]</button>

Exemplos:

var el = document.getElementById("meuId");

alert(isVisible(el)); //Retorna true se visivel, caso contrário retorna false

alert(isHidden(el)); //Retorna true se oculto, caso contrário retorna false
12
  • Eu não conhecia essa função, mas de qualquer forma nem sempre se usa classe CSS para esconder ou mostrar um elemento.
    – user37626
    Commented 29/06/2016 às 19:44
  • @KlaiderKlai isso não analisa apenas o CSS, ele analisa o atributo style=""
    – Syzoth
    Commented 29/06/2016 às 19:45
  • @WallaceMaxters como assim?
    – Syzoth
    Commented 29/06/2016 às 19:46
  • Esquece, quero evitar debates por hoje Commented 29/06/2016 às 19:51
  • 1
    @KlaiderKlai Ahh entendi, nesse caso se usar .hide ou .animate vai ser o element.style.display mesmo, mas é muito comum em jQuery usarem também .addClass, a sua resposta esta certa sim para o caso do AP (esta uma otima resposta a sua ;) ), só que geralmente tentamos fazer as respostas relevantes pra toda comunidade ;) (claro que isso não é obrigatoriedade)
    – Syzoth
    Commented 29/06/2016 às 20:18
2

Utilize o método window.getComputedStyle();

var escondido = window.getComputedStyle(document.getElementById("element")).display === 'none';

Este método avalia se o elemento ou um de seus pais está invisível.

1
  • Tá vendo, tomei negativo, mas foi bom perguntar. Esse aí eu não conhecia :D Commented 29/06/2016 às 19:30
2

Se você está mudando a visibilidade do elemento somente com a propriedade display (inline) do CSS, então você pode fazer essa condição para checar se o elemento é visível:

var box = document.getElementById("box");

if(box.style.display !== "none") {
    /* Bloco */
}

box.style.display !== "none" vai retornar true caso o modo de exibição seja indefinido, "initial", "block", "inline-block" ou outros tipos.

1

Você pode utilizar o offsetParent para isso, veja o exemplo abaixo:

<script>
  function isHidden(id) {
    var elemento = document.getElementById('teste');
    if (elemento.offsetParent === null) {
      elemento.style.display = 'block';
    } else {
       alert('Agora não ve mais!')
      elemento.style.display = 'none';
    }
  }
</script>

<div id="teste">
  Você me ve?
</div>

<button onclick="isHidden()">
  Clica aqui!
</button>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .