logo

JavaScript ocultar elementos

Em JavaScript, podemos ocultar os elementos usando o estilo.display ou usando o estilo.visibilidade . O visibilidade propriedade em JavaScript também é usada para ocultar um elemento. A diferença entre o estilo.display e estilo.visibilidade é ao usar visibilidade: oculto, a tag não está visível, mas o espaço é alocado. Usando Mostrar nenhum, a tag também não está visível, mas não há espaço alocado na página.

Em HTML, podemos usar o escondido atributo para ocultar o elemento especificado. Quando o escondido atributo em HTML é definido como verdadeiro, o elemento está oculto ou quando o valor é falso, o elemento está visível.

tupla java

Sintaxe

A sintaxe geral para ocultar um elemento usando estilo.oculto e estilo.visibilidade é dado da seguinte forma.

Usando estilo.oculto

 document.getElementById('element').style.display = 'none'; 

Usando estilo.visibilidade

 document.getElementById('element').style.visibility = 'none'; 

Agora, vamos ver alguns exemplos para entender a ocultação de elementos em javascript .

c++ int para string

Exemplo 1

Neste exemplo, veremos como remover elementos usando JavaScript estilo.display propriedade. Aqui, há um divisão elemento e um elemento de parágrafo que fica oculto ao clicar no determinado Botão HTML . Temos que clicar no 'Clique em mim!' botão para ver o efeito.

 style.display <h2> Using both style.visibility and style.display properties </h2> This is the div element. <p> This is a paragraph element. </p> <h3 id="heading"> This is the heading after the paragraph element. </h3> Click me! function fun() { document.getElementById(&apos;div&apos;).style.visibility = &apos;hidden&apos;; document.getElementById(&apos;heading&apos;).style.display = &apos;none&apos;; } 
Teste agora

Saída

Na saída, podemos ver que o divisão elemento (no qual aplicamos estilo.visibilidade propriedade) está ocultando, mas ainda alocando o espaço. Mas o título (ao qual aplicamos estilo.display propriedade) está se escondendo e não alocando nenhum espaço.

JavaScript ocultar elementos

Após clicar no botão, o resultado será -

JavaScript ocultar elementos