ページのスペースを取らずに要素を非表示にする方法は？

visibility:hidden特定の要素を非表示にするために使用していますが、非表示になっている間もページ上のスペースを占有します。

それらがまったくDOMにないかのように（ただし、実際にDOMから削除せずに）、それらを視覚的に完全に非表示にするにはどうすればよいですか？

display:none非表示に設定し、表示に設定してみてくださいdisplay:block。

代わりにスタイルを使用

<div style="display:none;"></div>

使用することdisplay:noneは、要素を削除するだけの良いオプションですが、スクリーンリーダーからも削除されます。それがSEOに影響を与えるかどうかについても議論があります。A List Apartには、そのトピックに関する優れた短い記事があります。

要素を非表示にしたいだけで削除したくない場合は、次のように使用してください：

div {
  position: absolute; 
  left: -999em;
}

このように、スクリーンリーダーで読むこともできます。

この方法の唯一の欠点は、このDIVが実際にレンダリングされ、特に携帯電話でパフォーマンスに影響する可能性があることです。

visibility: hidden;use を使用する代わりに、見てくださいdisplay: none;。最初のオプションは非表示にしますが、まだスペースをとり、目のオプションは非表示になりますとしない任意のスペースを取ります。

この質問への答えは、display：noneとdisplay：blockを使用することですが、これは、cssトランジションを使用して、visibilityプロパティを使用してコンテンツを表示および非表示にしようとしているユーザーには役立ちません。

displayを使用するとcssの遷移がすべて強制終了されるため、これも私を狂わせました。

1つの解決策は、可視性を使用しているクラスにこれを追加することです。

overflow:hidden

これが機能するかどうかはレイアウトに依存しますが、常駐するdiv内に空のコンテンツを保持する必要があります。

表示：どれも解決策ではありません、それはそのスペースで要素を完全に隠します。

話display:noneとvisibility: hidden

visibility:hidden タグは表示されませんが、ページ上にタグが割り当てられます。

display:none要素をそのスペースで完全に隠すことを意味します。（ただし、DOMを使用して操作することはできます）

display:none非表示にして表示するように設定display:blockします。

切り替えでdisplayは、CSSをスムーズに移行できません。代わりに、visibilityとの両方を切り替えますmax-height。

visibility: hidden;
max-height: 0;

ここに、display：noneの後にそれらを戻す別の方法があります。display：block / inlineなどを使用しないでください。代わりに（JavaScriptを使用している場合）cssプロパティの表示を ''（つまり、空白）に設定します

$('#abc').css({"display":"none"});

これによりコンテンツが非表示になり、空のスペースも残りません。

私の知識以上に、それは4つの方法で可能です

1. HTML<button style="display:none;"></button>
2. CSS #buttonId{ display:none; }
3. jQuery $('#buttonId').prop('display':'none');＆ $("#buttonId").css('opacity', 0);

display：noneは、ページの空白スペースを避けるための最良の方法です

!important既存のCSSスタイルをオーバーライドする必要がある場合に使用します。

display: none !important;