ページレイアウトに影響を与えずに HTML 要素を非表示にする方法

要素を非表示にしてページ レイアウトを維持する

視覚的なレイアウトに影響を与えずに HTML 要素を非表示にすることを目的とする場合、visibility: hidden を使用すると、次のような問題が発生する可能性があります。望ましくない結果に。要素がビューから非表示になっている間、要素はページ上の同じスペースを占有し続けます。

表示の無効化

この課題を克服するには、表示プロパティを使用することをお勧めします。要素の表示を none に設定すると、要素は DOM から完全に削除されたかのように、視覚的表現から効果的に消えます。

次の例を考えてみましょう。

<div>

初期状態の場合、div要素は正常に表示されます。非表示にするには:

#element {
  display: none;
}

display: none が適用されると、要素は視覚的になくなり、以前に占有していたスペースが解放されます。要素の可視性を復元するには:

#element {
  display: block;  
}

表示を使用する利点: なし

• ページのレイアウトを保持します
• HTML コード内の要素の位置
• 要素を簡単に表示できるようにします表示を設定して再度ブロックします: block

以上がページレイアウトに影響を与えずに HTML 要素を非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。