display：noneの反対はありますか？

196

の反対visibility: hiddenですvisibility: visible。同様に、反対はありますdisplay: noneか？

プロパティdisplay: noneを使用するほど明確ではないため、要素がある場合に要素を表示する方法を理解することに多くの人々が混乱しvisibilityます。

のvisibility: hidden代わりに使用するdisplay: noneこともできますが、同じ効果が得られないため、使用しません。

css 
— モハマド・アリーブ・シディキ
ソース
35
なぜこれが反対票を獲得し、リクエストをクローズするのかわかりません。それはトピック（スタックオーバーフローには現在143,368のCSSの質問があります）であり、現実の問題であり、人々が言語を適切に学習するのに役立つ良い質問です。
— ポールD.ウェイト2013
4
@Paul多分人々はそれが自己回答であることに気付かず、それは低い研究努力であると考えました（すべての研究努力が回答にあるため）
— Richard Tingle
11
あなたの答えがw3schools.com/cssref/pr_class_display.aspからテーブルをコピー/貼り付けることである場合、なぜわざわざ質問をするのですか？
— トカゲに請求する
1
@RichardTingle：ああ、良い点。@MohammadAreebSiddiq：ああ、私はあなたの答えを削除する必要があるとは思いませんでした。可能なすべてのdisplay値の大きなリストを削除するだけで問題ありません。（そして、それはもちろん私の意見です。多分人々はそのリストがそこにあるのが本当に好きだったかもしれません。）
— ポールD.ウェイト2013
あなたは本当に本当に本当にIlya Streltsynの答えを受け入れられたものにするべきでした。Ilyaは、表示の「バージョン」を提供します。どれも反対ではなく、質問の根底にある実際的な問題を解決しますが、受け入れることを選択した答えは、本質的には「いいえ」とだけ言います。これは確かに真実ですが、あまり役に立ちません。これは、言語学者向けではなく、プログラマ向けです。
— mathheadinclouds

回答:

176

display: noneのような文字通りの反対はありませんvisibility:hidden。

visibilityプロパティは、要素が可視であるか否かを判定する。したがって、2つの状態（visibleおよびhidden）があり、これらは互いに反対です。

displayプロパティは、しかし、レイアウトルールは要素が続くかを決定します。要素はCSSで自分自身をレイアウトする方法のための規則のいくつかの種類がありますが、そのいくつかの異なる値がある（block、inline、inline-blockなど- これらの値こちらのマニュアルを参照してください）。

display:none そこにないかのように、要素をページレイアウトから完全に削除します。

の他のすべての値はdisplay、要素をページの一部にするため、ある意味ではすべてがの反対ですdisplay:none。

しかし、直接的な逆の値は1つではありませんdisplay:none。「ハゲ」の反対のヘアスタイルがないのと同じです。

— ポール・D・ウェイト
ソース
2
display: initial削除された自己応答であなたが言及したことに気づきました-CSS2.1を実装するブラウザにとってはそれはと同義display: inlineです。display特定の要素のブラウザのデフォルトにリセットされません-それは「初期値」が意味するものではありません。
— BoltClock
26
「ハゲ」の例に対する私の投票:)非常にわかりやすい例！
— JesperRønn-Jensen14年
1
全体の読み取り、私は私の自己に思っていて、「うん、うん、素晴らしい例、彼らがしているすべての反対側にdisplay:none、あなたは」の反対だ誰のヘアスタイルがないだけのように読める「はげうまく入れ、うわープラス1」。
— Chef_Code 2015年
2
どんな髪型もハゲの反対です。
— AdjunctProfessorFalcon 2017
@AdjunctProfessorFalcon：そうですね。私が一番に剃った頭は、ボラよりもハゲの反対の方がはるかに少ないと思います。
— ポールD.ウェイト2017
83

そこに真の反対display: noneは（まだ）ありません。

しかしdisplay: unset、非常に近く、ほとんどの場合機能します。

以下からのMDN（Mozillaの開発者ネットワーク）：

未設定のCSSキーワードは、初期キーワードと継承キーワードの組み合わせです。これらの他の2つのCSS全体のキーワードと同様に、CSSの省略形allを含むすべてのCSSプロパティに適用できます。このキーワードは、親から継承する場合はプロパティを継承値にリセットし、そうでない場合は初期値にリセットします。つまり、最初のケースではinheritキーワードのように動作し、2番目のケースでは初期キーワードのように動作します。

（ソース：https : //developer.mozilla.org/docs/Web/CSS/unset）

また、display: revert現在開発中です。詳細については、MDNを参照してください。

— RockPaperLizard
ソース
どうdisplay: initialですか？
— Flimm
31

displayJavaScriptで要素を変更する場合、多くの場合、結果を「元に戻す」ための適切なオプションelement.style.display = "none"はelement.style.display = ""です。これにより、属性displayから宣言が削除され、property styleの実際の値がdisplayドキュメントのスタイルシートで設定された値に戻ります（他の場所で再定義されていない場合はブラウザーのデフォルトになります）。しかし、より信頼性の高いアプローチは、次のようなCSSのクラスを持つことです

.invisible { display: none; }

このクラス名をに追加/削除しelement.classNameます。

— イリヤ・ストレルシン
ソース
2
.element { display: none }（CSS libなどで定義されている）オーバーライドしたい場合.element { display: '' !important }は機能しません。使用する必要があります.element { display: unset !important }
— tanguy_k 2018
2
display:noneJavaScriptでのみ「元に戻す」ことについて話しました。もちろん、空の文字列は無効な値なので、CSSでは機能しません。Hovewerは、display: unsetあなたは例えば、デフォルトで、復元されません提案display:blockのために<div>、またはデフォルトdisplay:table-rowのためには<tr>、それが効果的にすべてを回すdisplay:inline（ちょうどのようにdisplay:initial）。要素のブラウザのデフォルト値を復元するためにがありますがdisplay:revert、十分にサポートされていません（caniuse.com/#feat=css-revert-value）。
— Ilya Streltsyn 2018
これは受け入れられる答えになるはずです。受け入れられた答えは「ハゲの反対」との良い比較を持っていますが、貧しいプログラマーが「ハゲを作る」-「今、髪を元に戻す」の実装に対処しなければならないことを助けるものは何もありません。この答えは、その実際的な問題に対処する方法を示しています。Element.style.display = ''は、「古い髪」がデフォルトの表示ではなく、「ブロック」または「テーブルセル」などであるため、エラーが発生しやすくなります。ここでの「.invisible」クラスの削除は、私が見る限り、「今すぐ髪を戻す」の唯一のバグのない実装です。したがって、常にこのようにしてください
— mathheadinclouds
6

あなたは使うことができます 

display: normal;

それは正常に動作します...それはCSSの小さなハッキングです;）

— インデラ
ソース
2
なぜこれが反対投票になるのですか？これはそれを行うのに悪い方法ですか？テーブルローでは問題なく機能しますが、他に使用する必要がありますか？
— Benjamin Karlog、2014
4
値 'normal'はdisplayプロパティの有効な値ではないため、無視され、element.style.display = ''割り当てのように効果的に機能します（上記の私の回答を参照）。
— Ilya Streltsyn
27
つまりdisplay: chunk norris;、もう少しキックすれば、同じ効果を得ることができます。
— Kevin B
1
.element { display: none }（CSS libなどで定義されている）オーバーライドしたい場合.element { display: normal !important }は機能しません。使用する必要があります.element { display: unset !important }
— tanguy_k 2018
4

私が使っ display:block; ています

— プラディープ・ベヘラ
ソース
これはblock、として表示する必要がある要素にのみ役立ちます。たとえば、通常のinline要素に必要なものではありません<span>。
— Flimm
3

Paulが説明しているように、表示の正反対はありません。各要素には異なるデフォルトの表示があり、クラスやインラインスタイルなどで表示を変更できるため、HTMLにはありません。

ただし、jQueryのようなものを使用する場合、それらのshow関数とhide関数は、display noneの反対があるかのように動作します。要素を非表示にしてから再度表示すると、非表示になる前とまったく同じように表示されます。これは、要素を非表示にしたときに表示プロパティの古い値を格納することによって行われます。これにより、要素を再度表示したときに、非表示にする前と同じように表示されます。 https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180

これは、たとえばdivをインラインまたはインラインブロックを表示するように設定し、それを非表示にしてから再度表示した場合、以前と同じように再びインラインまたはインラインブロックとして表示されることを意味します。

<div style="display:inline" >hello</div>
<div style="display:inline-block">hello2</div>
<div style="display:table-cell" >hello3</div>

脚本：

  $('a').click(function(){
        $('div').toggle();
    });

divの表示プロパティは、非表示（display：none）にして再び表示した後でも一定のままです。

— user3589536
ソース
1
「display：table-cell」が必要だった。他の回答では言及されていません。
— bendecko 2015
1

印刷用のスタイルシートの場合、以下を使用します。

/* screen style */
.print_only { display: none; }

/* print stylesheet */
div.print_only { display: block; }
span.print_only { display: inline; }
.no_print { display: none; }

値を含むフォームを印刷する必要があり、入力フィールドを印刷するのが難しいときに、これを使用しました。そのため、span.print_onlyタグでラップされた値（div.print_onlyは別の場所で使用されました）を追加し、.no_printクラスを入力フィールドに適用しました。画面に入力フィールドが表示され、印刷すると値のみが表示されます。空想を得たい場合は、JSを使用してフィールドが更新されたときにspanタグの値を更新できますが、私の場合は必要ありませんでした。おそらく最もエレガントなソリューションではありませんが、それは私にとってはうまくいきました！

— TonyP
ソース
1

display：blockを使用できます

例： 

<!DOCTYPE html>
<html>
<body>

<p id="demo">Lorem Ipsum</p>

<button type="button" 
onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
<button type="button" 
onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>
</html>
— Adeetya Kulkarni
ソース
0

特定のユーザーに対してのみ非表示にするテーブルを必要とするアプリを作成するときに、この課題に遭遇しました。

最初は、display：noneとして設定しましたが、表示したいユーザーのためにdisplay：inline-blockを設定しました。

私がそれを回避した方法は、最初にテーブルを表示してから、それを見たくないユーザーのために「display：none」を実行することでした。このようにして、それは正常にフォーマットされましたが、必要に応じて消えました。

側面的な解決策のビットですが、誰かを助けるかもしれません！

— アンドリューセインズベリー
ソース
-2

visibility：hiddenは要素を非表示にしますが、要素はDOMを使用しています。また、display：noneの場合は、要素をDOMから削除します。

したがって、要素を非表示または再表示するオプションがあります。しかし、それを削除すると（つまり、何も表示しないことを意味します）、反対の値は明確になりません。displayには、display：block、display：inline、display：inline-blockなど、いくつかの値があります。W3Cから確認できます。

— ハーディック・ソンダガー
ソース
2
なぜ他の値がdisplayないのですか？
— ポールD.ウェイト2013
1
これは包括的なリストになるはずですか？そうではありません。
— Ry-
-3

これdisplay:block;を使用して追加することもできますoverflow:hidden;

— ベル
ソース
1
自分で貢献する前に、既存の回答を読んでください。昨年5月からは 、よく賛成された良い回答があり、投票数の合計が負の回答もあり、多かれ少なかれ同じです。
— クエンティン
私は答えを見ました。Display：UnsetはDisplay：blockと同様に機能しません。私の意見:) @クエンティン
— Bel
そして、display: block上でうまく動作しない<span>か<td>...と以前の答えはすでに述べましたdisplay: block。
— クエンティン
2
回答を編集して言及しましたoverflow: hidden。どうして？それを追加する意味は何ですか？の取り消しとは関係ありませんdisplay: none。
— Quentin
-4

最良の「反対」は、それを次のデフォルト値に戻すことです。

display: inline
— TimNguyenBSM
ソース
displayプロパティにはデフォルト値がないことを明確にしたいだけですが、html要素にはあります。DIVのデフォルト値はdisplay：blockで、SPANのデフォルト値はdisplay：inlineです。ただし、それ自体の表示プロパティにはデフォルト値がありません。
— ケビニウス2014年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.