visibility:hiddenとdisplay:noneの違いは何ですか?


1173

CSSルールvisibility:hiddendisplay:noneその両方により、要素は表示されなくなります。これらの同義語はありますか?

回答:


1475

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

14
お互いのパフォーマンスについてのコメントはありませんか?絶対に配置された要素を非表示にするために、どの方法を使用して、頻繁に表示および非表示になるかを知りたいです。
トマーシュZato -復活モニカ

2
これは私がテストを行ったことがない完全な推測ですが、それらはほぼ同じだと思います。画面上で何かが変更されるとすぐに、画面全体が再レンダリングされます(少なくとも以前はそれが使用されていました)ので、それは本当に問題ではありません。まだ画面の再描画を強制しています。ただし、これはブラウザごとに可能であり、実際には、これらに焦点を合わせるよりもコードを最適化するためのより良い方法があるでしょう。
kemiller2002 2014年

13
@Kevinは、その中に正しいvisibility: hiddendisplay: noneそれらの両方リトリガレイアウトは、ペイント及び複合ので等しくパフォーマンスであろう。ただし、opacity: 0は機能的に同等でvisibility: hiddenあり、レイアウト手順を再トリガーしないため、空のスペースがまだ割り当てられていることを気にしない場合は、それを使用することをお勧めします(それ以外の場合はを使用しますdisplay: none)。
jayrobin 2015

76
可視性とディスプレイについて話すときは、CSS遷移を覚えておくことが重要です。たとえば、可視性から切り替える:非表示。可視性:可視; css-transitionsを使用できるようにしますが、表示を切り替える:なし。表示する:ブロック; ではない。可視性:非表示には、JavaScriptイベントをキャプチャしないという追加の利点がありますが、不透明度:0; イベントをキャプチャします。
マイケルディール

9
opacity: 0入力またはボタンはまだ存在し、奇妙なユーザーインタラクションを引き起こす可能性があるため、入力またはボタンを扱う場合は注意して使用する必要があります。
ジャックモエット2018年

233

同義語ではありません。

display:none ページの通常のフローから要素を削除し、他の要素が入力できるようにします。

visibility:hidden 要素がページの通常のフローに残っているため、まだスペースを占めています。

あなたが遊園地での乗車に列を作っており、列の誰かが非常に乱暴になり、警備員が列から彼らを引き抜くと想像してください。その後、列に並んだ全員が1つ前の位置に移動して、空になったスロットを埋めます。これはみたいdisplay:noneです。

これを同様の状況と比較してください。ただし、あなたの前の誰かが不可視のマントを着用している場合。線を表示していると、何もないスペースがあるように見えますが、誰かがまだそこにいるため、人々は実際にはその空のスペースを埋めることはできません。これはみたいvisibility:hiddenです。


3
それらの間にはもう1つの大きな違いがあります。少なくともChromeでは、可視性は遷移遅延で使用できますが、ディスプレイはそれを無視します。
SapphireSun

1
説明がおかしいが面白い。:)
Elango Paul Victor

107

質問はされませんでしたが、追加する価値があることの1つは、オブジェクトを完全に透明にする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.

(結果を表示するには、必ず上の[コードスニペットの実行]ボタンをクリックしてください。)

1と2の違いはすでに指摘されています(つまり、2はまだ領域を占有します)。ただし、2と3の間には違いがあります。ケース3の場合、リンクの上にマウスを置くと、マウスは引き続き手に切り替わり、ユーザーはリンクをクリックでき、JavaScriptイベントは引き続きリンク上で発生します。これは通常はありませんあなたが望む行動(多分、時にはそれがあります?)。

もう1つの違いは、テキストを選択し、プレーンテキストとしてコピー/貼り付けすると、次のようになることです。

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

ケース3では、テキストはコピーされます。多分これはある種の透かしに役立つでしょう、あるいは不注意にユーザーがあなたのコンテンツをコピー/貼り付けした場合に表示されるであろう著作権表示を隠したいのであれば?


@greenoldman例を提供できますか?コンテナの唯一の要素である非表示要素(divとspanを試してみました)のjsfiddleは次のとおりですが、それでもスペースを占有します。jsfiddle.net
Kip

@Kip、奇妙-今はできません(自分のプロジェクトも変更しました)。わかりました。以前のコメントは削除した方がいいです。しっかりとしたテストケースができたら、申し訳ありませんが、ノイズのため申し訳ありません。
greenoldman 16

90

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

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


70

子ノードに関しては大きな違いがあります。例:親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は表示されません。


良い点は、これは簡単に見逃される可能性があることです。display:none / blockは遷移をトリガーしないため、visibility:hiddenを使用しても機能しますが、子要素にもvilibility:hiddenが必要です
Drenai

18

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

visibility: hidden 要素を非表示にしますが、ページフローは非表示にして、ページ上に要素のためのスペースを残します。


15

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

Visibility: hidden 見えなくても、ドキュメントフローにスペースを残します。

これは、何をしているのかによって、大きな違いをもたらす場合とそうでない場合があります。


$( '#element')。remove()を使用すると、ページ(DOM)から要素が完全に削除されます。表示しないことやスペースを使用しないことは、それを削除することを意味しません。単純な$( '#element')。show()でステータスを変更できるため、「完全に削除」されません。
foxont​​herock 2013

11

visibility:hiddenオブジェクトがまだページ上の垂直方向の高さを占めます。display:noneそれが完全に除去されます。画像の下にdisplay:noneテキストがあり、その場合、そのテキストは、画像があったスペースを埋めるために上に移動します。visibility:hiddenを実行すると、テキストは同じ場所に残ります。


非表示の場合、保存されるスペースは垂直寸法のみです。水平はどうですか?
Chris Noe

2
水平寸法も保持されます。
JB Hurteaux 2008年

9

display:none要素を非表示にしてスペースが占めるスペースを縮小しますが、要素を非表示にしてスペースvisibility:hiddenを維持します。display:noneは、古いバージョンのIEとSafariのJavaScriptから利用できるいくつかのプロパティにも影響します。


7

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


7

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


6
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


ウェブサイト上の既知の不正確さのため、w3schoolsにリンクしないようにアドバイスします。
2018年

5

可視性プロパティがに設定されている"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

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

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



2

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

の効果と副作用display: none

  • ターゲット要素はドキュメントフローから取り出されます(他の要素のレイアウトには影響しません)。
  • すべての子孫が影響を受けます(表示されず、この継承から「スナップアウト」できません)。
  • 測定値は、ターゲット要素のためにもその子孫のために作ることができない-彼らは、このように、すべてでレンダリングされていない彼らのclientWidthclientHeightoffsetWidthoffsetHeightscrollWidthscrollHeightgetBoundingClientRect()getComputedStyle()、すべてのリターン0の。

の効果と副作用visibility: hidden

  • ターゲット要素は非表示になりますが、フローから除外されず、レイアウトに影響を与え、通常のスペースを占有します。
  • innerTextinnerHTMLターゲット要素と子孫の(ではない)は空の文字列を返します。

1

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


0

ここには多くの詳細な回答がありますが、影響があるため、アクセシビリティに対処するためにこれを追加する必要があると思いました。

display: none;そして、visibility: hidden;、すべてのスクリーンリーダーソフトウェアで読み取ることはできません。視覚障害者が体験することを覚えておいてください。

質問は同義語についても尋ねます。text-indent: -9999px;ほぼ同等のもう1つです。との重要な違いtext-indentは、スクリーンリーダーで読み上げられることが多いことです。ユーザーがまだリンクにタブで移動できるため、少し悪い体験になる可能性があります。

アクセシビリティに関して、私が今日使用しているのは、スクリーンリーダーに表示されているときに要素を非表示にするスタイルの組み合わせです。

{
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

コンテンツ本体のアンカーへの「コンテンツにスキップ」リンクを作成することをお勧めします。視覚障害のあるユーザーは、すべてのページで完全なナビゲーションツリーを聞きたくないでしょう。リンクを視覚的に非表示にします。ユーザーはタブを押すだけでリンクにアクセスできます。

アクセシビリティと非表示コンテンツの詳細については、以下を参照してください。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.