CSS 是否有相反的显示：无？

Is there an opposite to display:none?

提问by Mohammad Areeb Siddiqui

The opposite of visibility: hiddenis visibility: visible. Similarly, is there any opposite for display: none?

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

Many people become confused figuring out how to show an element when it has display: none, since it's not as clear as using the visibilityproperty.

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

I could just use visibility: hiddeninstead of display: none, but it does not give the same effect, so I am not going with it.

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

采纳答案by Paul D. Waite

display: nonedoesn't have a literal opposite like visibility:hiddendoes.

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

The visibilityproperty decides whether an element is visible or not. It therefore has two states (visibleand hidden), which are opposite to each other.

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

The displayproperty, however, decides what layout rules an element will follow. There are several different kinds of rules for how elements will lay themselves out in CSS, so there are several different values (block, inline, inline-blocketc — see the documentation for these values here).

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

display:noneremoves an element from the page layout entirely, as if it wasn't there.

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

All other values for displaycause the element to be a part of the page, so in a sense they're allopposite to display:none.

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

But there isn't one value that's the direct converse of display:none- just like there's no one hair style that's the opposite of "bald".

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

回答by RockPaperLizard

A true opposite to display: nonethere is not (yet).

真正的对立面display: none还没有（还）。

But display: unsetis very close and works in most cases.

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

From MDN(Mozilla Developer Network):

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

The unset CSS keyword is the combination of the initial and inherit keywords. Like these two other CSS-wide keywords, it can be applied to any CSS property, including the CSS shorthand all. This keyword resets the property to its inherited value if it inherits from its parent or to its initial value if not. In other words, it behaves like the inherit keyword in the first case and like the initial keyword in the second case.

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

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

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

Note also that display: revertis currently being developed. See MDNfor details.

另请注意，display: revert目前正在开发中。有关详细信息，请参阅MDN。

回答by Ilya Streltsyn

When changing element's displayin Javascript, in many cases a suitable option to 'undo' the result of element.style.display = "none"is element.style.display = "". This removes the displaydeclaration from the styleattribute, reverting the actual value of displayproperty to the value set in the stylesheet for the document (to the browser default if not redefined elsewhere). But the more reliable approach is to have a class in CSS like

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

.invisible { display: none; }

and adding/removing this class name to/from element.className.

并将此类名称添加到/从element.className.

回答by indera

you can use

您可以使用

display: normal;

It works as normal.... Its a small hacking in css ;)

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

回答by Pradeep Behera

I use display:block;It works for me

我用display:block;它对我有用

回答by user3589536

Like Paul explains there is no literal opposite of display: none in HTML as each element has a different default display and you can also change the display with a class or inline style etc.

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

However if you use something like jQuery, their show and hide functions behave as if there was an opposite of display none. When you hide, and then show an element again, it will display in exactly the same manner it did before it was hidden. They do this by storing the old value of the display property on hiding of the element so that when you show it again it will display in the same way it did before you hid it. https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180

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

This means that if you set a div for example to display inline, or inline-block and you hide it and then show it again, it will once again show as display inline or inline-block same as it was before

这意味着，如果您设置一个 div 例如显示内联或内联块，然后隐藏它然后再次显示它，它将再次显示为显示内联或内联块，与之前相同

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

script:

脚本：

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

Notice that the display property of the div will remain constant even after it was hidden (display:none) and shown again.

请注意，即使在隐藏 (display:none) 并再次显示之后，div 的 display 属性仍将保持不变。

回答by TonyP

In the case of a printer friendly stylesheet, I use the following:

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

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

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

I used this when I needed to print a form containing values and the input fields were difficult to print. So I added the values wrapped in a span.print_only tag (div.print_only was used elsewhere) and then applied the .no_print class to the input fields. So on-screen you would see the input fields and when printed, only the values. If you wanted to get fancy you could use JS to update the values in the span tags when the fields were updated but that wasn't necessary in my case. Perhaps not the the most elegant solution but it worked for me!

当我需要打印包含值的表单并且输入字段难以打印时，我使用了它。所以我添加了包装在 span.print_only 标签中的值（div.print_only 用于其他地方），然后将 .no_print 类应用于输入字段。所以在屏幕上你会看到输入字段，当打印时，只有值。如果你想变得更有趣，你可以在字段更新时使用 JS 来更新 span 标签中的值，但在我的情况下这不是必需的。也许不是最优雅的解决方案，但它对我有用！

回答by Adeetya Kulkarni

You can use display: block

您可以使用显示：块

Example :

例子 ：

<!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> 

回答by Andrew Sainsbury

I ran into this challenge when building an app where I wanted a table hidden for certain users but not for others.

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

Initially I set it up as display:none but then display:inline-block for those users who I wanted to see it but I experienced the formatting issues you might expect (columns consolidating or generally messy).

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

The way I worked around it was to show the table first and then do "display:none" for those users who I didn't want to see it. This way, it formatted normally but then disappeared as needed.

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

Bit of a lateral solution but might help someone!

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

回答by Yasir

The best answer for display: noneis

最好的答案display: none是

display:inline

or

或者

display:normal