可见性:隐藏的反面是可见性:可见。同样地,是否有相反的显示:没有?

当一个元素有display: none时,许多人都搞不清楚如何显示它,因为它不像使用visibility属性那么清楚。

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


当前回答

就像Paul解释的那样,没有与显示相反的文字:在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

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

其他回答

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

你可以使用

display: normal;

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

Display:unset将其设置回初始值,而不是之前的“Display”值

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

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

就像Paul解释的那样,没有与显示相反的文字:在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

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

使用display: revert

来自https://developer.mozilla.org/en-US/docs/Web/CSS/revert上的文档

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

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