有没有与显示相反的东西：无？答案

【问题标题】：Is there an opposite to display:none?有没有与显示相反的东西：无？
【发布时间】：2013-07-13 14:11:44
【问题描述】：

visibility: hidden 的反义词是visibility: visible。同样，display: none 有没有相反的地方？

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

我可以只使用visibility: hidden 而不是display: none，但效果不一样，所以我不会这样做。

【问题讨论】：

好吧，您可能会问“如何撤消 display:none 的效果”——那么，Ilya 的方法将是一个准确的答案。本质上，您要求一些显示：？某事？，这样那？某事？撤消 display: none 的效果（我会称之为相反）。当然，那？什么？不存在。所以没有对立面。是的，没有必要争论，这没有争议。但是，如果您使用 Ilya 的方法，您可以撤消效果。所以，在更高的意义上，它是相反的。只是没有“一字之差”对立。
@mathheadinclouds 这就是保罗的回答告诉我们的。没有对立面，都是相反的。我没有要求撤消效果的方法，我要求显示规则可以像可见性规则一样持有的值。

标签： css

【解决方案1】：

display: none 没有像 visibility:hidden 那样的字面反义词。

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

然而，display 属性决定了元素将遵循的布局规则。元素在 CSS 中的布局有多种不同的规则，因此有几种不同的值（block、inline、inline-block 等 — see the documentation for these values here）。

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

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

但没有一种价值与display:none 直接相反——就像没有一种发型与“秃头”相反。

【讨论】：

我注意到您在已删除的自我回答中提到了 display: initial - 对于实现 CSS2.1 的浏览器，它与 display: inline 同义。它不会将display 重置为给定元素的浏览器默认值——这不是“初始值”的含义。
如果你选择秃顶，当你停止剃须时，如果你剃须前是这样，你的头发会重新卷曲和变黑。 ;-) 我同意this comment 的观点，“display 太重载了”，CSS 应该为我们提供流（块或内联）、内部布局（flex、网格等）和可见性（可见，不可见，无/隐藏）。虽然 separate flow and internal layout is now a thing，覆盖 display: none 仍然很痛苦。

【解决方案2】：

与display: none 完全相反的是（还没有）。

但是display: unset 非常接近并且在大多数情况下都有效。

来自MDN（Mozilla 开发者网络）：

未设置的 CSS 关键字是初始关键字和继承关键字的组合。像这两个其他 CSS 范围的关键字一样，它可以应用于任何 CSS 属性，包括 CSS 简写 all。如果属性从其父级继承，则此关键字将属性重置为其继承值，否则重置为其初始值。换句话说，它的行为类似于第一种情况下的继承关键字和第二种情况下的初始关键字。

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

另请注意，display: revert 目前正在开发中。详情请见MDN。

【讨论】：

display: initial 呢？
@Flimm 不，display: initial 相当于恢复到 display: inline，如果您以前有一个默认为 display: block 的元素，您不希望这样做。

【解决方案3】：

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

.invisible { display: none; }

并在element.className 中添加/删除此类名称。

【讨论】：

如果你想用.element { display: '' !important } 覆盖.element { display: none }（例如在CSS lib 中定义），它不会起作用。你必须使用.element { display: unset !important }
我只在 JavaScript 中提到了“撤消”display:none。当然，空字符串在 CSS 中不起作用，因为它是无效值。但是，您建议的display: unset 不会恢复，例如默认display:block 用于<div> 或默认display:table-row 用于<tr>，它有效地将所有内容转换为display:inline（就像display:initial )。要恢复元素的浏览器默认值，有display:revert，但不太支持（caniuse.com/#feat=css-revert-value）。

【解决方案4】：

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

但是，如果您使用 jQuery 之类的东西，它们的显示和隐藏函数的行为就好像没有显示的相反。当您隐藏，然后再次显示一个元素时，它将以与隐藏之前完全相同的方式显示。他们通过在隐藏元素时存储 display 属性的旧值来做到这一点，这样当您再次显示它时，它将以与隐藏它之前相同的方式显示。 https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180

这意味着如果你设置一个 div 例如显示 inline 或 inline-block 并且你隐藏它然后再次显示它，它将再次显示为 display inline 或 inline-block 与以前相同

<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) 并再次显示后仍将保持不变。

【讨论】：

"display:table-cell" 是我需要的。没有在任何其他答案中提及。

【解决方案5】：

你可以使用

display: normal;

它正常工作....它是css中的一个小黑客;）

【讨论】：

为什么会被否决？这是一种不好的方法吗？它适用于 tablerows，但我应该使用其他东西吗？
值 'normal' 不是 display 属性的有效值，因此它只是被忽略并像 element.style.display = '' 分配一样有效地工作（参见上面的 my answer）。
所以换句话说，您可以使用display: chunk norris; 来获得相同的效果，但效果更佳。
如果你想用.element { display: normal !important } 覆盖.element { display: none }（例如在CSS lib 中定义），它不会起作用。你必须使用.element { display: unset !important }

【解决方案6】：

我用 display:block; 它对我有用

【讨论】：

这仅对您希望显示为block 的元素有用，对于inline 元素（例如<span>）通常不是您想要的。

【解决方案7】：

这是来自未来的答案……在您提出这个问题大约 8 年后。虽然display: none 仍然没有相反的价值，但请继续阅读……还有更好的东西。

display 属性太重了，这不好笑。它至少具有三种不同的功能。它控制：

外部显示类型（元素如何参与父流布局，例如block、inline）
内部显示类型（子元素的布局，例如flex，grid）
显示框（元素是否显示，例如contents、none）。

这已经成为现实很长时间了，我们已经学会了忍受它，但是一些早该进行的改进（希望如此！）即将到来。

Firefox 现在支持 two-value syntax (or multi-keyword values) 用于分隔外部和内部显示类型的 display 属性。例如，block 现在变为 block flow，flex 变为 block flex。它并没有解决none 的问题，但我认为明确的关注点分离是朝着正确方向迈出的一步。

同时，Chromium (85+) 为我们提供了content-visibility 属性和announced it with some fanfare。它旨在解决一个不同的问题——通过不渲染元素（及其子布局）来加快页面加载时间，直到它接近视口并且确实需要被看到，同时仍然可以访问“查找”搜索等。它确实只需给它值auto，它就会自动发生。这本身就是一个令人兴奋的消息，但看看它还有什么作用……

content-visibility: hidden 属性为您提供所有相同的功能未渲染内容和缓存渲染状态的好处 content-visibility: auto 不在屏幕上。然而，与 auto，它不会自动开始在屏幕上渲染。

这为您提供了更多控制权，允许您隐藏元素的内容，然后快速取消隐藏。

将其与隐藏元素内容的其他常用方法进行比较：

display: none：隐藏元素并破坏其渲染状态。这意味着取消隐藏元素与渲染新元素一样昂贵具有相同内容的元素。

visibility: hidden：隐藏元素并保持其渲染状态。这并没有真正从文档中删除元素，因为它（它是子树）仍然占用页面上的几何空间并且可以仍然被点击。它还会随时更新渲染状态即使隐藏也需要。

content-visibility: hidden，另一方面手，隐藏元素，同时保留其渲染状态，所以，如果有任何改变需要发生，它们只有在元素再次显示（即content-visibility: hidden 属性被删除）。

哇。所以这就是display: none 一直以来应该做的——一种从布局中移除元素的方式，优雅地，完全独立于显示类型！所以content-visibility: hidden 的“对立面”是content-visibility: visible，但是auto 中有第三个非常有用的选项，它可以为您进行延迟渲染，从而加快您的初始页面加载速度。

这里唯一的坏消息是 Firefox 和 Safari 尚未采用它。但是谁知道，当您（亲爱的开发人员）阅读本文时，情况可能已经改变。密切关注https://caniuse.com/css-content-visibility！

【讨论】：

我喜欢你的回答！一旦接近当前标准，我会很乐意接受它。
别担心！是的，我们只能希望良好的意识占上风，其他浏览器很快就会采用这一点。看起来很简单。

【解决方案8】：

对于打印机友好的样式表，我使用以下内容：

/* 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 标签中的值，但在我的情况下这不是必需的。也许不是最优雅的解决方案，但它对我有用！

【讨论】：

【解决方案9】：

我在构建一个应用程序时遇到了这个挑战，我希望为某些用户隐藏一个表格，但不为其他用户隐藏。

最初我将其设置为 display:none，但随后 display:inline-block 用于那些我想看到它但我遇到了您可能预期的格式问题（列合并或通常混乱）的用户。

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

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

【讨论】：

尽管这不能直接回答问题，但这是一个非常好的观点……如果您只在需要的地方使用媒体查询，则不需要覆盖display:none例如。我确实认为您可以通过取消有关您的桌子的故事而只关注原始问题来大大改善答案。也许你可以先说，'display:none 的反面是不使用display:none' :-) 然后提供一个简单的 HTML 和 CSS 示例。

【解决方案10】：

你可以使用 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>

【讨论】：

【解决方案11】：

返回原始状态：

 display=""

【讨论】：

【解决方案12】：

在使用 react native 时，与“none”相反的是“flex”。

【讨论】：

【解决方案13】：

visibility:hidden 将隐藏元素，但元素是它们的 DOM。在 display:none 的情况下，它会从 DOM 中删除元素。

因此您可以选择隐藏或取消隐藏元素。但是一旦你删除它（我的意思是不显示）它就没有明确的相反值。 display 有几个值，如 display:block、display:inline、display:inline-block 和许多其他值。您可以从 W3C 中查看。

【讨论】：

为什么display 没有其他值？
这应该是一个完整的列表吗？不是。

【解决方案14】：

display:unset 将其设置回一些初始设置，而不是之前的“显示”值

我只是复制了之前的显示值（在我的例子中是 display: flex;）再次（在显示非之后），它覆盖了显示：没有成功

（我使用 display:none 来隐藏移动和小屏幕的元素）

【讨论】：

嗨，欢迎来到 StackOverflow。请保留答案部分，仅供参考。如果您对已经给出的答案有疑问，您应该在该答案的 cmets 中提问，或者如果以前从未提出过，请提出一个新问题。更多关于这里的答案指南：stackoverflow.com/help/how-to-answer

【解决方案15】：

display: none 的最佳答案是

display:inline

或

display:normal

【讨论】：

好像没有display:normal这样的东西。见developer.mozilla.org/en-US/docs/Web/CSS/display

【解决方案16】：

最好的“相反”是将其恢复为默认值：

display: inline

【讨论】：

只是想说明 display 属性没有默认值，但是 html 元素有。 DIV 的默认值为 display:block，SPAN 的默认值为 display:inline。但是它自己的显示属性没有默认值。

【解决方案17】：

你可以使用这个display:block;，也可以添加overflow:hidden;

【讨论】：

请在贡献自己的答案之前阅读现有答案。有一个很好的、好评如潮、接受的answer from last May，还有一个an answer with a negative total of votes，它或多或少与你的相同。
我看到了答案。 Display:Unset 不像 Display:block 那样工作。我的意见:) @Quentin
而display: block 在<span> 或<td> 上效果不佳……之前的答案已经提到display: block。
您已编辑答案以提及overflow: hidden。为什么？添加它有什么意义？它与撤消 display: none 无关。