Como mostrar ou ocultar um elemento no site usando JavaScript

Durante o desenvolvimento da web, os usuários precisam ocultar ou mostrar alguns elementos. Esses elementos podem ser um botão, alguma animação ou uma barra de navegação etc. Na maioria das vezes, o usuário deseja que um botão ou uma barra de navegação seja visível para o ponto de vista da área de trabalho, mas não para o ponto de vista móvel.

Com o JavaScript, os usuários podem ocultar ou mostrar facilmente um elemento na página da web, dependendo do comportamento do usuário. Neste artigo, veremos como o JavaScript é usado para esse fim.

Esconder e exibir elementos em JavaScript

Usando JavaScript, podemos ocultar ou mostrar um elemento na página da web usando:

• estilo.mostrar
• estilo.visibilidade

Vamos entender cada um deles separadamente com exemplos e, em seguida, comparar como diferem um do outro:

Como usar o estilo.Exibir em JavaScript: A propriedade Display representa um elemento que deve ser exibido em sua página da web ... usando esse usuário pode ocultar o elemento inteiro, e a página é construída como o elemento anterior não estava lá.

Sintaxe:

Aqui em vírgulas, um valor deve ser definido para exibir o conteúdo ou não. Aqui está um exemplo:

Para ocultar elemento: estilo.display = "nenhum":

Clique no botão "Hide Me" para ocultar o elemento Div:

À medida que o usuário clica no botão, a função é chamada para ocultar o elemento. Isso é feito atribuindo nenhum valor ao estilo.mostrar.

Agora veja a saída, como o botão ocupou o espaço da imagem. É assim que a exibição funciona, esconde completamente o elemento e reconstrua a página como se o elemento não estivesse lá em primeiro lugar.

Para mostrar um elemento: estilo.display = "" ou "Block":

Clique no botão "Mostrar -me" para mostrar o elemento o elemento div:

Agora, da mesma forma, para mostrar o elemento que o botão moveu e forneceu espaço para o elemento quando a exibição foi alterada do estilo.display = "nenhum" para estilo.display = "".

Através dessas maneiras, o elemento será exibido ou completamente oculto e não apenas sua visibilidade. A página será reconstruída de acordo com esses comportamentos.

Como usar o estilo.Visibilidade em JavaScript: A visibilidade do estilo funciona da maneira semelhante, mas a diferença é que apenas a visibilidade do elemento está oculta do leitor de tela. Isso significa que o elemento não é removido do fluxo de página, deixando o espaço para ele na página.

Sintaxe:

Aqui em vírgulas, um valor de "oculto" ou "" nenhum valor deve ser definido para exibir o conteúdo ou não. Para entender melhor isso aqui está um exemplo:

Este é um parágrafo.

Este é outro parágrafo.

Agora, aqui quando o botão foi clicado para ocultar a visibilidade, ele apenas o escondeu para o olho do espectador.

Neste, o espaço na página da web não foi ocupado pelo elemento. Isso mostra como estilo.exibição e estilo.visibilidade diferir.

Conclusão

Todo mundo quer se esconder ou mostrar alguns elementos específicos em sua página da web. Nisso Como orientar, aprendemos maneiras de mudar a visibilidade dos elementos na página da web usando JavaScript. Existem duas maneiras específicas, mas elas diferem um pouco um do outro. Usando estilo.mostrar O conteúdo fica oculto e seu espaço é ocupado pelo outro conteúdo. Considerando que, usando estilo.visibilidade, O conteúdo está oculto apenas para o leitor, mas ainda está lá, pois seu espaço não pode ser ocupado por outros elementos. Isso é extremamente útil para os desenvolvedores da Web, pois os desenvolvedores querem que algum conteúdo seja oculto e alguns a serem exibidos de acordo com o ponto de vista.