Bom, aparentemente você não entendeu a base do DOM, então pra esclarecer...
Basicamente, o javascript dentro de uma página HTML, tem a liberdade de modificar elementos CSS, dentro de objetos HTML, como por exemplo a borda de uma ou um tamanho máximo de um
.
Quando você chama um elemento HTML dentro de um script (usando querySelector()
por exemplo), você "puxa" as informações do HTML em formato de objeto, que têm suas devidas propriedades.
Até aí, você tem suas noções básicas de interação script-web, ok?
Ao carregar, uma página vai ser exibida com as definições CSS que você estabelecer, então para começar invisível, deve estabelecer no objeto que o display: none
.
Seguindo isso, sugiro que dê uma estudada em Objetos JS, e nas noções básicas da linguagem, em algum site como a W3School.
À frente, o importante de se pensar é:
Com document.getElementById()
, você está acessando ao DOCUMENTO
da página (document
), e logo em seguida pedindo que procure e te
retorne o elemento com determinado ID, através do método
getElementById()
Como funciona a mudança dos elementos através do javascript então?
Você pode visualizar esse processo como uma ÁRVORE.
Seu tronco é o document
, e o primeiro galho é o de
getElementById()
, que acessa agora seu elemento com id citado.
Agora você quer acessar a característica DISPLAY desse elemento, que
nesse exemplo será none ou block. A característica é acessível
dentro do requisito style
, do CSS.
Então seguimos no galho style
, e então na característica desejada, o
display
.
O código então seria: document.getElementById('el').style.display;
Com uma condicional simples você pode dizer que esse elemento recebe a característica none (não aparece) ou block (aparece), chamando uma função através do seu botão:
<button onclick='switch'></button>
e no seu script, uma função como
function(){
let div = document.getElementById('minhaDiv');
div.style.display==='none' ? div.style.display = 'block' : div.style.display = 'none'
}
Enfim, espero ter ajudado.
.minhaDiv{display: none}
. Veja Qual a diferença entre display:none e visibility:hidden?