是否有相反的显示:没有?

visibility: hidden的反义词是visibility: visible。类似地，display: none有相反的吗?

许多人对于如何显示具有display: none的元素感到困惑，因为它不像使用visibility属性那么清楚。

我可以只使用visibility: hidden而不是display: none，但它不会产生相同的效果，所以我不使用它。

295828 次浏览
小开

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

你可以为元素选择hide或unhide。但是一旦你删除它(我的意思是不显示)，它就没有明确的相反值。Display有几个值，如Display:block, Display:inline, Display:inline-block和许多其他值。你可以从W3C找到它。

小开
最佳答案

display: none不像visibility:hidden那样有字面上的相反。

visibility属性决定一个元素是否可见。因此，它有两个彼此相反的状态(visible和hidden)。

然而，display属性决定元素将遵循什么布局规则。CSS中元素如何布局有几种不同类型的规则，因此有几个不同的值(block， inline， inline-block等- 请在这里查看这些值的文档)。

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

display的所有其他值使元素成为页面的一部分，因此在某种意义上，它们是所有与display:none相反。

但是没有一个值是与display:none直接相反的——就像没有一种发型是与“秃”相反的一样。

小开

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

.invisible { display: none; }

并在element.className中添加/删除这个类名。

小开

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

display: inline
小开

你可以使用

display: normal;

它正常工作....这是css的一个小黑客;)

小开

就像Paul解释的那样，没有与显示相反的文字:在HTML中没有，因为每个元素都有不同的默认显示，你也可以用类或内联样式等改变显示。

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

这意味着如果你将一个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)并再次显示之后，它的显示属性也将保持不变。

小开
我使用< p > display:block; 它为我工作

小开

在打印机友好的样式表的情况下，我使用以下:

/* 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标签中的值，但在我的情况下这是不必要的。也许这不是最优雅的解决方案，但对我来说很有效!

小开

与display: none真正相反的是没有(还没有)。

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

来自中数 (Mozilla开发者网络):

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

(来源:https://developer.mozilla.org/docs/Web/CSS/unset)

还要注意display: revert目前正在开发中。详见中数。

小开

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

小开

display: none的最佳答案是

display:inline

或

display:normal
小开

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

最初，我将它设置为display:none，但后来为那些我希望看到它的用户设置了display:inline-block，但我遇到了您可能期望的格式问题(列合并或通常混乱)。

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

这是一个横向的解决方案，但可能会帮助到某些人!

小开

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

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

小开

显示:取消设置将使它回到某个初始设置，而不是之前的“显示”。值

我只是复制了之前的显示值(在我的情况下显示:flex;) 再次(在display non之后)，并且它过度尝试显示:none成功

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

小开

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

display属性重载得太厉害了，一点都不好笑。它至少有三个不同的功能。它控制:

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

长期以来，这一直是现实，我们已经学会了忍受它，但一些姗姗来迟的改进(希望如此!)正在向我们走来。

Firefox现在支持双值语法(或多关键字值)的display属性，它分离了外部和内部显示类型。例如，block现在变成了block flow，而flex变成了block flex。它并没有解决none的问题，但我认为明确的关注点分离是朝着正确方向迈出的一步。

同时，Chromium(85+)给了我们content-visibility属性和大张旗鼓地宣布。它的目标是解决一个不同的问题——加速页面加载时间，它不呈现一个元素(及其子布局)，直到它接近视口并且真正需要被看到，同时仍然可以用于“查找”搜索等。它只需要给它赋值auto就能自动完成。这本身就是令人兴奋的消息，但看看它还做了什么……

content-visibility: hidden属性给你所有相同的 未呈现内容和缓存呈现状态的好处为 content-visibility: auto在屏幕外。然而，不像 auto，它不会自动开始在屏幕上呈现 这给了你更多的控制，允许你隐藏一个元素的

.

.

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

  • display: none:隐藏元素并销毁其呈现状态。这意味着取消隐藏元素与呈现new一样昂贵
  • visibility: hidden:隐藏元素并保持其呈现状态。这并没有真正地从文档中删除元素 (它的子树)仍然会占用页面上的几何空间 仍然可以点击。它还随时更新呈现状态

content-visibility: hidden，另一方面 Hand，隐藏元素，同时保留其呈现状态，因此，if 有任何改变需要发生，它们只发生在 元素再次显示(即content-visibility: hidden属性) 被移除)。< / p >

哇。所以这就是display: none一直以来应该做的事情——一种从布局中优雅地、完全独立于显示类型删除元素的方法!所以content-visibility: hidden的“相反”是content-visibility: visible，但是你在auto中有第三个非常有用的选项，它为你做惰性渲染，加速你的初始页面加载。

唯一的坏消息是Firefox和Safari还没有采用它。但谁知道呢，当你(亲爱的开发伙伴)读到这篇文章时，情况可能已经改变了。密切关注https://caniuse.com/css-content-visibility!

小开

恢复到原来的状态put:

 display=""
小开

使用display: revert

从https://developer.mozilla.org/en-US/docs/Web/CSS/revert中声明的文档

revert CSS关键字将属性的级联值从其当前值恢复为如果当前样式原点未对当前元素进行任何更改，则属性将具有的值。因此，如果属性从其父继承，则将属性重置为其继承的值，或者将属性重置为用户代理的样式表建立的默认值(如果存在用户样式，则重置为用户样式)。它可以应用于任何CSS属性，包括CSS速记属性all。

它支持所有主流浏览器- https://caniuse.com/css-revert-value


提交答案