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

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

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


当前回答

你可以使用这个display:block;并同时添加overflow:hidden;

其他回答

你可以使用

display: normal;

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

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

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

display: inline

使用display: revert

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

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

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

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

.invisible { display: none; }

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