Question

visibility: hidden的反面是visibility: visible。同样，display: none是否有相反的情况？

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

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

Answer 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直接相反 - 就像没有一种发型与“秃头”相反。

Answer 2

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

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

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

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

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

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

Answer 3

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

.invisible { display: none; }

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

Answer 4

你可以使用

display: normal;

它正常工作......它是一个小型的黑客攻击;）

Answer 5

我用 display:block; 它对我有用

Answer 6

就像Paul解释的那样，display不存在任何字面意思：HTML中没有，因为每个元素都有不同的默认显示，你也可以用类或内联样式等改变显示。

但是如果你使用像jQuery这样的东西，它们的show和hide函数就会表现得好像没有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的显示属性即使在隐藏（显示：无）并再次显示之后也将保持不变。

Answer 7

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

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

Answer 8

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

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

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

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

Answer 9

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

Answer 10

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

Answer 11

display：unset将其重新设置为某些初始设置，而不是先前的“ display”值

我只是复制了以前的显示值（在我的情况下，显示为：flex;）再次（在不显示之后），并且覆盖了显示：没有成功

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

Answer 12

display: none的最佳答案是

display:inline

或

display:normal

Answer 13

visibility：hidden将隐藏元素，但元素是他们的DOM。如果显示：none，它将从DOM中删除元素。

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

Answer 14

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

Answer 15

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

display: inline

是否有相反的显示：无？

15 个答案: