显示是否相反：无？

195

相反的visibility: hidden是visibility: visible。同样，有什么反面display: none吗？

很多人困惑于如何在元素显示时显示元素display: none，因为它不像使用该visibility属性那样清晰。

我可以使用visibility: hidden代替display: none，但是它不会产生相同的效果，因此我不打算使用它。

css 
— 穆罕默德·阿雷布·西迪基（Mohammad Areeb Siddiqui）
source
35
不知道为什么这会导致投票失败和关闭请求。这是一个主题（在Stack Overflow上目前有143,368个CSS问题），这是一个现实问题，并且是帮助人们正确学习该语言的一个好问题。
— Paul D. Waite
4
@Paul也许人们没有注意到这是一个自我答案，并认为这是一项低水平的研究工作（因为所有的研究工作都在答案中）
— 理查德·廷格
11
为什么要问一个问题，您的答案是否是从w3schools.com/cssref/pr_class_display.asp复制/粘贴表？
— 比尔蜥蜴
1
@RichardTingle：啊，好点。@MohammadAreebSiddiq：噢，我不认为您的答案需要删除。只需删除所有可能display值的大清单就可以了。（当然，这只是我的意见：也许人们真的很喜欢其中的列表。）
— Paul D. Waite 2013年
您确实真的应该让Ilya Streltsyn的答案得到接受。Ilya给出了显示的“版本”：没有哪个与之相反，它解决了您的问题背后的实际问题，而您选择接受的答案实质上只是说“不”。哪一个是正确的，但有用得多。这是给程序员的，不是给语言学家的。
— mathheadinclouds

Answers:

176

display: none没有像这样的字面相反visibility:hidden。

该visibility属性决定元素是否可见。因此，它具有两个相反的状态（visible和hidden）。

display但是，该属性决定元素将遵循的布局规则。有几种不同类型的规则元素将如何自己奠定了在CSS，所以有几个不同的值（block，inline，inline-block等- 请参阅文档这里这些值）。

display:none 从页面布局中完全删除一个元素，就好像它不存在一样。

所有其他值都会display导致元素成为页面的一部分，因此从某种意义上来说，它们都与相反display:none。

但是，没有一个是直接相反的价值display:none-就像没有一种发型是“秃头”的对立面一样。

— 保罗·D·威特
source
2
我注意到您display: initial在已删除的自我解答中提到过-对于实现CSS2.1的浏览器，它是的同义词display: inline。display对于给定的元素，它不会重置为浏览器默认值-这不是“初始值”的含义。
— BoltClock
26
我对“秃头”示例的投票：)非常容易理解的示例！
— JesperRønn-Jensen2014年
1
整个通读过程中，我一直在思考自己“很好的例子，是的，是的，它们全都与display:none” 相反，然后您阅读“，就像没有一种发型与秃头相反。
— Chef_Code 2015年
2
任何发型都是秃头的反面。
— AdjunctProfessorFalcon'Aug
@AdjunctProfessorFalcon：好吧。我想说，剃掉头的头比乌鱼要少得多。
— Paul D. Waite，
83

display: none还没有一个与之相反的事实。

但是display: unset非常接近并且在大多数情况下都可以使用。

通过MDN（Mozilla开发人员网络）：

未设置CSS关键字是initial和Inherited关键字的组合。像其他两个CSS级关键字一样，它可以应用于任何CSS属性，包括全部的CSS缩写。如果该关键字从其父级继承，则将该属性重置为其继承的值；如果不是，则将该属性重置为其初始值。换句话说，在第一种情况下，它的行为类似于Inherit关键字，在第二种情况下，其行为与initial关键字类似。

（来源：https : //developer.mozilla.org/docs/Web/CSS/unset）

还请注意，display: revert当前正在开发中。有关详细信息，请参见MDN。

— 岩纸蜥蜴
source
那display: initial呢
— Flimm
31

当改变元素的displayJavascript中，在许多情况下，适当的选项设置为“撤消”结果element.style.display = "none"是element.style.display = ""。这display将从style属性中删除声明，将属性的实际值恢复为display在样式表中为文档设置的值（如果未在其他地方重新定义，则为浏览器默认值）。但是更可靠的方法是在CSS中创建一个类，例如

.invisible { display: none; }

并将该类名称添加到/中element.className。

— 伊利亚（Ilya Streltsyn）
source
2
如果要覆盖.element { display: none }（例如，在CSS lib中定义），.element { display: '' !important }将无法使用。您必须使用.element { display: unset !important }
— tanguy_k
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
这应该是公认的答案。可接受的答案与“相反的秃头”有很好的比较，但是对于可怜的程序员不得不处理实现“使秃头”（“现在，把头发放回去”）没有任何帮助。该答案告诉您如何处理该实际问题。Element.style.display =''容易出错，因为“旧头发”可能不是默认显示，而是“块”或“表单元格”或其他内容。据我所知，在这里删除“ .invisible”类是“立即放头发”的唯一无错误实现。所以，总是这样做
— mathheadinclouds
6

您可以使用 

display: normal;

它正常工作。...在css中是一个小技巧；）

— der
source
2
为什么这被低估？这是一个坏方法吗？它适合桌布，但我应该使用其他东西吗？
— 本杰明·卡洛格
4
值“正常”不是display属性的有效值，因此它被忽略并且有效地像element.style.display = ''赋值一样工作（请参见上面的答案）。
— Ilya Streltsyn 2015年
27
因此换句话说，您可以使用display: chunk norris;相同的效果，但踢更多一点。
— 凯文B
1
如果要覆盖.element { display: none }（例如，在CSS lib中定义），.element { display: normal !important }将无法使用。您必须使用.element { display: unset !important }
— tanguy_k
3

就像Paul解释的那样，显示没有字面意义的相反：HTML中没有显示，因为每个元素都有不同的默认显示，您还可以使用类或内联样式等更改显示。

但是，如果使用类似jQuery的东西，它们的show和hide函数的表现就好像与display none相反。当您隐藏并再次显示元素时，该元素将以与隐藏之前完全相同的方式显示。他们通过在隐藏元素时存储display属性的旧值来做到这一点，这样，当您再次显示它时，它将以隐藏之前的相同方式显示。 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属性被隐藏（display：none）并再次显示，它的显示属性也将保持不变。

— 用户名
source
1
我需要的是“ display：table-cell”。未在其他任何答案中提及。
— bentecko
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标签中的值，但是对于我而言，这不是必需的。也许不是最优雅的解决方案，但它对我有用！

— 托尼
source
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）
source
0

我在构建一个应用程序时遇到了这个挑战，我想要为某些用户而不是其他用户隐藏一个表。

最初，我将其设置为display：none，然后为那些想要查看但对于我可能遇到过的格式化问题（列合并或总体上混乱）的用户显示：inline-block。

解决该问题的方法是先显示该表，然后为那些我不想看到的用户执行“ display：none”。这样，它可以正常格式化，然后根据需要消失。

有点横向解决方案，但可能会对某人有所帮助！

— 安德鲁·塞恩斯伯里
source
-2

可见性：隐藏将隐藏元素，但是元素是它们与DOM的结合。并且在display：none的情况下，它将从DOM中删除该元素。

因此，您可以选择隐藏或取消隐藏元素。但是，一旦删除它（我的意思是不显示），它就不会清除相反的值。display具有多个值，例如display：block，display：inline，display：inline-block等。您可以从W3C签出。

— 哈迪克·桑达加尔
source
2
为什么没有其他任何值display呢？
— Paul D. Waite
1
这应该是综合清单吗？不是。
— Ry-
-3

您可以使用它display:block;并添加overflow:hidden;

— 贝尔
source
1
在贡献自己的答案之前，请先阅读现有答案。从去年五月开始，有一个很好的，被赞成的和被接受的 答案，而且还有一个总投票数为负的答案，与您的投票大致相同。
— Quentin
我看到了答案。Display：Unset和Display：block一样不起作用。我的意见:) @Quentin
— Bel
并且display: block在a <span>或<td>… 上效果不佳，并且先前的答案已经提到display: block。
— Quentin
2
您已编辑要提及的答案overflow: hidden。为什么？加上那个有什么意义？它与撤消操作无关display: none。
— Quentin
-4

最好的“相反”是将其返回为默认值：

display: inline
— TimNguyenBSM
source
只想弄清楚display属性没有默认值，但是html元素却有。DIV的默认值为display：block，SPAN的默认值为display：inline。但是显示属性本身没有默认值。
— kevinius 2014年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.