Ocultar / mostrar elementos de JavaScript

Harshit Jindal 30 janeiro 2023 3 julho 2021 JavaScript JavaScript DOM
  1. Use a propriedade style.visibility para ocultar / mostrar os elementos HTML
  2. Use a propriedade style.display para ocultar / mostrar os elementos HTML
  3. Use hide() / show() da jQuery para ocultar / mostrar os elementos HTML
  4. Use jQuery toggle() para ocultar / mostrar elementos HTML
  5. Use addClass() / removeClass() para ocultar / mostrar elementos HTML
Ocultar / mostrar elementos de JavaScript

Freqüentemente nos deparamos com situações em que desejamos alternar entre exibir e ocultar um elemento. Este tutorial apresenta como ocultar / mostrar um elemento em JavaScript.

Use a propriedade style.visibility para ocultar / mostrar os elementos HTML

A propriedade style.visibility, quando definida como oculta, torna o elemento de destino oculto, mas não o remove do fluxo. Portanto, o elemento de destino é renderizado, mas não fica visível. Não afeta o layout e permite que outros elementos ocupem seu espaço natural. Podemos tornar o elemento de destino visível novamente definindo a propriedade de volta para visible.

document.getElementById(id).style.visibility = "visible"; // show
document.getElementById(id).style.visibility = "hidden"; // hide

Use a propriedade style.display para ocultar / mostrar os elementos HTML

A propriedade style.display, quando definida como none, remove o elemento de destino do fluxo normal da página e permite que o resto dos elementos ocupem seu espaço. Embora o elemento de destino não seja visível na página, ainda podemos interagir com ele por meio do DOM. Todos os descendentes são afetados e não são exibidos apenas como o elemento pai. Podemos tornar o elemento de destino visível novamente definindo a propriedade para block. É aconselhável definir display como '' porque block adiciona uma margem a um elemento.

document.getElementById(id).style.display = 'none'; // hide
document.getElementById(id).style.display = ''; // show

Use hide() / show() da jQuery para ocultar / mostrar os elementos HTML

O método show() nos ajuda a exibir elementos ocultos por meio do método display:none ou jQuery hide(). Não é possível exibir elementos que tenham sua visibilidade oculta. Ele aceita os três parâmetros a seguir:

  1. Speed: especifica a velocidade de retardo do efeito de desvanecimento.
  2. Easing: especifica a função de atenuação usada para fazer a transição para um estado visível / oculto. Tem dois valores diferentes: swing e linear.
  3. Callback: É uma função executada depois de concluída a execução do método show().

Da mesma forma, o método jQuery hide() ajuda a ocultar os elementos selecionados. Leva os mesmos parâmetros 3 de show().

$("#element").hide();  // hide
$("#element").show();  // show

Use jQuery toggle() para ocultar / mostrar elementos HTML

O jQuery toggle() é um método especial que nos permite alternar entre os métodos hide() e show(). Ajuda a tornar visíveis os elementos ocultos e os elementos visíveis ocultos. Ele também usa os mesmos três parâmetros dos métodos hide() e show() do jQuery. Também leva um 4º parâmetro de exibição que ajuda a alternar o efeito ocultar / mostrar. É um parâmetro booleano que, quando definido como falso, oculta o elemento.

$("div.d1").toggle(500,swing);  // toggle hide and show

Use addClass() / removeClass() para ocultar / mostrar elementos HTML

A função addClass() nos ajuda a adicionar uma classe à lista de classes existentes de um elemento, e removeClass() nos ajuda a removê-la. Podemos usar essas funções para alternar ocultar / mostrar escrevendo uma classe personalizada que oculta o elemento e, em seguida, adicionando e removendo-o da lista de classes.

.hidden {display:none}
$("div").addClass("hidden");  // hide
$("div").removeClass("hidden"); // show

Artigo relacionado - JavaScript DOM

  • Criar tabela usando JavaScript
  • Mover elemento em JavaScript
  • JavaScript anexar dados ao Div
  • JavaScript DOM pronto
  • Ativar / desativar botão de entrada usando JavaScript