1307

CSS ルールvisibility:hiddenとdisplay:none両方により、要素が表示されなくなります。これらは同義語ですか？

4

21 に答える 21

1625

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
于 2008-09-25T12:40:05.647 に答える
271

それらは同義語ではありません。

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

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

あなたが遊園地で乗り物の列に並んでいて、列の誰かが乱暴になり、警備員が彼らを列から引き抜いたと想像してください。次に、列に並んでいる全員が 1 つ前の位置に移動して、現在空になっているスロットを埋めます。これはのようなものdisplay:noneです。

これを似たような状況と比較してみてください。線を見ていると、空いたスペースがあるように見えますが、その空っぽに見えるスペースを実際に埋めることはできません。これはのようなものvisibility:hiddenです。

于 2008-09-25T13:50:55.757 に答える
123

追加する価値のあることの 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 では、テキストがコピーされます。おそらく、これはある種の透かしに役立つか、または不注意にユーザーがコンテンツをコピー/貼り付けした場合に表示される著作権表示を非表示にしたい場合に役立ちますか?

于 2009-10-02T21:27:30.370 に答える
95

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

visibility:hiddenそれを非表示にしますが、スペースを残します。

于 2008-09-25T12:39:43.200 に答える
78

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

于 2015-01-14T09:39:16.387 に答える
19

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

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

于 2008-09-25T12:41:15.083 に答える
15

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

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

これは、あなたが何をしているかに応じて、大きな違いを生む場合とそうでない場合があります。

于 2008-09-25T12:40:46.223 に答える
11

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

于 2008-09-25T12:41:24.410 に答える
9

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

于 2008-09-25T12:41:45.317 に答える
8

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

于 2013-05-29T13:47:24.430 に答える
7

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

于 2013-04-01T17:42:43.563 に答える
7 
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

于 2018-01-29T06:08:33.540 に答える
6

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

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

于 2013-05-29T13:49:42.203 に答える
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>

詳細を見る

于 2011-12-27T05:25:48.537 に答える
2

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

の効果と副作用display: none：

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

の効果と副作用visibility: hidden：

  • ターゲット要素はビューから隠されていますが、フローから取り出されず、レイアウトに影響を与え、通常のスペースを占めています。
  • innerTextinnerHTMLターゲット要素と子孫の(ただし ではない) は、空の文字列を返します。
于 2019-06-18T20:25:02.877 に答える