web-dev-qa-db-ja.com

可視性：hiddenとdisplay：noneの違いは何ですか？

CSSの規則visibility:hiddenとdisplay:noneはどちらも要素が表示されないという結果になります。これらの同義語はありますか？

cssvisibility
1051
Chris Noe

display:noneは、問題のタグがページにまったく表示されないことを意味します（ただし、domを介してタグと対話することはできますが）。他のタグの間にはスペースが割り当てられません。

visibility:hiddenは、display:noneとは異なり、タグは表示されませんが、ページにはスペースが割り当てられることを意味します。タグはレンダリングされ、ページには表示されません。

例えば：

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

[style-tag-value]をdisplay:noneに置き換えると、次のようになります。

test |   | test

[style-tag-value]をvisibility:hiddenに置き換えると、次のようになります。

test |                        | test
1335
kemiller2002

同義語ではありません。

display:noneは、ページの通常のフローから要素を削除し、他の要素が埋められるようにします。

visibility:hiddenは、まだスペースを占有するように、ページの通常のフローに要素を残します。

あなたがアミューズメントパークに乗るために列に並んでいて、列の誰かがとても乱暴になってセキュリティがそれらを線から追い出すと想像してください。それから一列に並んだ全員が1つ前のポジションに移動して、今は空のスロットを埋めます。これはdisplay:noneのようなものです。

これと同様の状況とは対照的ですが、目の前の誰かが目に見えないマントを着ています。ラインを見ている間、それは空のスペースがあるように見えますが、誰かがまだそこにいるので人々は本当にその空のように見えるスペースを埋めることができません。これはvisibility:hiddenのようなものです。

207
user22151

追加される価値があることは、尋ねられませんでしたが、オブジェクトを完全に透明にするという3番目のオプションがあるということです。検討してください：

1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.

この場合あなたは得る：

1st link.
2nd        link.
3rd        link.

1と2の違いはすでに指摘されています（つまり、2はまだスペースを占有します）。ただし、2と3の間には違いがあります。ケース3では、リンク上にマウスを移動するとマウスが手の形に変わり、ユーザーはリンクをクリックできます。Javascriptイベントはリンク上で発生します。これは通常notあなたが望む振る舞いです。テキストを選択するときの動作はブラウザによっても異なります。

93
Kip

display:noneはレイアウトフローから要素を削除します。

visibility:hiddenはそれを隠しますがスペースを残します。

81
mmaibaum

子ノードになると大きな違いがあります。たとえば、親divと入れ子になった子divがあるとします。あなたがこのように書くならば：

<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>

この場合、divはどれも表示されません。しかし、あなたがこのように書くならば：

<div id="parent" style="visibility:hidden;">
     <div id="child" style="visibility:visible;"></div>
</div>

そうすると子のdivが表示され、親のdivは表示されません。

63
Govinda

それらは同義語ではありません - display: noneはページのフローから要素を削除し、残りのページは存在しないかのようにフローします。

visibility: hiddenは、要素をビューから隠しますが、ページフローは隠しません。そのため、ページ上にスペースが残ります。

17
ConroyP

display: noneはページから要素を完全に削除し、要素がまったく存在しないかのようにページが構築されます。

表示されなくなっても、Visibility: hiddenはドキュメントフロー内のスペースを残します。

これはあなたがしていることに応じて大きな違いを生むかもしれません。

15
wcm

visibility:hiddenを使用しても、オブジェクトはページの垂直方向の高さを引き継ぎます。 display:noneでそれは完全に削除されます。画像の下にテキストがあり、display:noneをすると、そのテキストは画像があった場所のスペースを埋めるように上に移動します。あなたが可視性をするならば：隠されたテキストは同じ場所に残るでしょう。

11
Steven Williams

display:noneは要素を非表示にし、スペースを占有していたスペースを折りたたみますが、visibility:hiddenは要素を非表示にして要素スペースを保持します。 display：noneは、古いバージョンのIEおよびSafariのjavascriptから利用できるいくつかのプロパティにも影響します。

9
slashnick

他のすべての答えに加えて、IE8には重要な違いがあります。display:noneを使用して要素の幅または高さを取得しようとすると、IE8は0を返します（他のブラウザは実際のサイズを返します）。 IE8はvisibility:hiddenに対してのみ正しい幅または高さを返します。

7
szeryf

visibility:hiddenはスペースを確保します。 display:noneは違います。

6
Pearl
display: none;

それはページ上で利用可能にならず、スペースを占有しません。

visibility: hidden;

それは要素を隠しますが、それでも以前と同じスペースを占有します。要素は非表示になりますが、それでもレイアウトに影響します。

visibility: hiddenはスペースを保存しますが、display: noneはスペースを保存しません。

表示なし例： https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

非表示の表示例： https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

6
Anu

Visibilityプロパティが"hidden"に設定されている場合、たとえ見えなくてもブラウザはコンテンツのためにページ上のスペースを取ります。
しかし、オブジェクトを"display:none"に設定すると、ブラウザはそのコンテンツのためにページ上のスペースを割り当てません。

例：

<div style="display:none">
Content not display on screen and even space not taken.
</div>

<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>

詳細を見る

5
Shubelal Kumar

visibility:hiddenは要素をページ内に保持し、そのスペースを占有しますが、ユーザーには表示されません。

display:noneはページ内では使用できず、スペースを占有しません。

4
Ramesh

もう1つの違いは、visibility:hiddenは実際には本当に古いブラウザでも機能しますが、display:noneは機能しないことです。

https://www.w3schools.com/cssref/pr_class_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp

3
Dave Burton

違いはスタイルを超えており、JavaScriptで操作されたときの要素の動作に反映されます。

display: noneの効果と副作用：

  • ターゲット要素はドキュメントフローから取り出されます（他の要素のレイアウトには影響しません）。
  • すべての子孫が影響を受けます（どちらも表示されず、この継承から「スナップアウト」できません）。
  • ターゲット要素またはその子孫に対して測定を行うことはできません。これらはまったくレンダリングされないため、clientWidth、clientHeight、offsetWidth、offsetHeight、scrollWidth、scrollHeight、getBoundingClientRect()、getComputedStyle()、すべては0sを返します。

visibility: hiddenの効果と副作用：

  • ターゲット要素はビューから非表示になりますが、フローから取り出されず、レイアウトに影響を与え、通常のスペースを占有します。
  • ターゲット要素および子孫のinnerText（innerHTMLは除く）は空の文字列を返します。
1
Adam Jagosz

display:none;は要素を表示せず、ページ上の要素にスペースを割り当てませんが、visibility:hidden;はページに要素を表示しませんがページにスペースを割り当てます。どちらの場合もDOMの要素にアクセスできます。よりよく理解するために、次のコードを見てください。 表示：なしvs表示：非表示

1
Pritam Bohra