Sobes.tech
Junior

Quais são as maneiras de esconder um elemento HTML numa página web?

sobes.tech IA

Resposta da IA

  • display: none; - o elemento é completamente removido do fluxo do documento, não ocupa espaço e os eventos não são processados. A forma mais "forte" de ocultar.
  • visibility: hidden; - o elemento permanece no fluxo do documento, mantém o seu lugar, mas não é visível. Os eventos do rato e do teclado não são processados.
  • opacity: 0; - o elemento permanece no fluxo do documento, mantém o seu lugar, não é visível. Os eventos do rato e do teclado são processados (pode clicar, passar o cursor, etc.). O elemento torna-se simplesmente completamente transparente.
  • position: absolute; e definir coordenadas fora da área visível (por exemplo, left: -9999px;). O elemento é removido do fluxo normal, mas ainda está presente na página e pode afetar a rolagem. Os eventos são processados.
  • width: 0; height: 0; overflow: hidden; - o elemento permanece no fluxo, mas as suas dimensões são anuladas. Os eventos podem ser processados se a sua área cair na parte visível de outro elemento.
  • font-size: 0; e line-height: 0; (para esconder conteúdo de texto). Mantém o elemento, mas torna o seu texto invisível.
  • Uso do pseudo-elemento :empty (não para todos os elementos e casos). Esconde o conteúdo se o elemento estiver vazio.

A escolha do método depende do comportamento desejado: se precisa que o elemento ocupe espaço, processe eventos ou seja completamente removido do fluxo.