ページスペースを犠牲にせずに要素を隠す

DOM 内での要素の存在を維持しながらビジュアル表示から要素を削除しようとするときの一般的なアプローチの 1 つこれには、visibility:hidden 属性の使用が含まれます。ただし、この方法では、隠蔽された要素によってスペースが永続的に占有される可能性があります。

目に見える痕跡を残さずに要素を効果的に非表示にするには、display:none プロパティと display:block を組み合わせて非表示を解除することを検討してください。

display:none による非表示

対象の要素に display:none を実装します不明瞭:

element {
  display: none;
}

このアクションは要素を視覚的に認識できないようにレンダリングし、実質的にビューから非表示にします。

display:block で表示

既に非表示にするには要素を再表示し、display:block をそれに割り当てます:

element {
  display: block;
}

このメソッドを使用すると、DOM 内の要素の存在やページ上の割り当てられたスペースに影響を与えることなく、要素を非表示にしたり表示したりできます。