Como tornar um DIV visível e invisível com JavaScript

113

Você pode fazer algo como

function showDiv()
{
    [DIV].visible = true;
    //or something
}

javascript html

— Neurônio
fonte

1

Por que não apenas usar Jquery? .ocultar() ?

— coderama

Eu usaria isso como o nome do div, então se o div fosse chamado test, eu o faria test.hide()?

8

@JackStone: Não, isso é apenas se você já estiver usando a biblioteca jQuery. Algumas pessoas simplesmente gostam de promovê-lo em todas as questões de JavaScript. Mesmo se você fosse, .hide()não define visibilidade. Ele define a exibição.

6

@ Não sou, você claramente não entendeu que jQuery é realmente ótimo e faz todas as coisas. (Fonte da imagem)

— Pekka

8

Para algo assim, uma boa resposta deve conter uma solução JS simples e uma que mostre a vantagem de usar uma biblioteca - neste caso, não ter que lidar com inline vs block ao usar displaypara mostrar um elemento.

— ThiefMaster

139

se [DIV] é um elemento, então

[DIV].style.visibility='visible'

OU

[DIV].style.visibility='hidden'

— Ron Tornambe
fonte

16

visibilitytem o efeito colateral de que o espaço ocupado pelo elemento permanece reservado. Isso pode ou não ser o que o OP deseja

— Pekka

1

No local onde diz [DIV], eu digitaria o nome do meu div certo?

20

Não, use em document.getElementById('id-of-the-div')vez de[DIV]

— ThiefMaster

@JackStone: Depende do que você entende por "nome" do seu div. Se for uma variável que está referenciando o div, então sim.

1

Então, se meu div fosse nome testdiv, seria document.getElementById('testdiv').style.visibility = 'hidden';?

124

Vamos supor que você não use uma biblioteca como a jQuery.

Se você ainda não tiver uma referência ao elemento DOM, obtenha uma usando var elem = document.getElementById('id');

Depois, você pode definir qualquer propriedade CSS desse elemento. Para mostrar / ocultar, você pode usar duas propriedades: displaye visibility, que têm efeitos ligeiramente diferentes:

O ajuste style.displayparecerá como se o elemento não estivesse presente ("removido").

elem.style.display = 'none'; // hide
elem.style.display = 'block'; // show - use this for block elements (div, p)
elem.style.display = 'inline'; // show - use this for inline elements (span, a)

ou style.visibilityfará com que o div ainda esteja lá, mas seja "todo vazio" ou "todo branco"

elem.style.visibility = 'hidden'; // hide, but lets the element keep its size
elem.style.visibility = 'visible';

Se estiver usando jQuery, você pode fazer isso ainda mais fácil, desde que queira definir a displaypropriedade:

$(elem).hide();
$(elem).show();

Ele usará automaticamente o displayvalor apropriado ; você não precisa se preocupar com o tipo de elemento (embutido ou bloco). Além disso, elemnão pode ser apenas um elemento DOM, mas também um seletor, como #idou .classou qualquer outra coisa que seja CSS3 válida (e muito mais!).

— ThiefMaster
fonte

Prefiro sua resposta, mas acho que há uma pequena correção que você deve usar elem.style.display = 'none';

— Saumil

Às vezes, é aceitável atribuir uma string vazia para mostrar um elemento .

— Basilevs,

29

Você pode usar visibilityou, displaymas deve aplicar alterações ao div.styleobjeto e não ao divobjeto em si.

var div = document.getElementById('div_id');

// hide
div.style.visibility = 'hidden';
// OR
div.style.display = 'none';

// show
div.style.visibility = 'visible';
// OR
div.style.display = 'block';

— Zellio
fonte

div.style.visibility = falsenão funciona para mim no Chrome. E a trueparte parece estar funcionando mais por acidente porque desarruma a propriedade (embora não seja meu voto negativo)

— Pekka

Nem displaynem visibilitysão propriedades boolean. Além disso, nonee blockprecisam ser citados por serem strings ..

— ThiefMaster

valores errados para os rótulos. Isso funciona agora e não, não vou mexer nisso, é muito simplista.

— zellio

4

Você pode usar as funções DOM: setAttribute e removeAttribute. No link a seguir você tem um exemplo de como usá-los.

funções setAttribute e removeAttribute

Uma visão rápida:

hide:    document.getElementById("myDiv").setAttribute("hidden","");
unhide:  document.getElementById("myDiv").removeAttribute("hidden");

— jarh 1992
fonte

2

Você pode melhorar sua resposta? Com exemplos e explicações.

— Gaël Barbin

1

Você pode usar o opacityqual é semelhante a, visibility mas permite suavizar a transição e controlar outros parâmetros como altura (para simplificar o snippet, coloquei a lógica js em html diretamente - não faça isso no código de produção)

Exibir trecho de código

.box { width:150px; height: 150px; background: red; transition: 0.5s }

.hide { opacity: 0; height: 10px}

<div id="box" class="box"></div>

<button onclick="box.classList.toggle('hide')">Toggle</button>

Expandir trecho

— Kamil Kiełczewski
fonte

0

Use o atributo 'oculto' do elemento DOM:

function showDiv(isVisible)
{
    [DIV].hidden = !isVisible;
}

— Andrey Hohutkin
fonte

0

Tornar invisível usando CSS

#div_id {
        /*height: 400px;*/
         visibility:hidden;
    }

Torne visível usando Javascript

document.getElementById('div_id').style.visibility = 'visible';

— Dilip Kumar Choudhary
fonte