可见性:隐藏的反面是可见性:可见。同样地,是否有相反的显示:没有?
当一个元素有display: none时,许多人都搞不清楚如何显示它,因为它不像使用visibility属性那么清楚。
我可以只使用visibility: hidden而不是display: none,但它不会产生相同的效果,所以我不会使用它。
可见性:隐藏的反面是可见性:可见。同样地,是否有相反的显示:没有?
当一个元素有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)并再次显示之后,它的显示属性也将保持不变。
其他回答
Display:unset将其设置回初始值,而不是之前的“Display”值
我只是复制了之前的显示值(在我的情况下display: flex;) 再次(在display non之后),并且它过度尝试了display:none成功
(我使用display:none来隐藏移动和小屏幕的元素)
你可以使用这个display:block;并同时添加overflow:hidden;
我在构建一个应用程序时遇到了这个挑战,我想要为某些用户隐藏一个表,而不是为其他用户隐藏。
最初,我将它设置为display:none,但后来为那些我希望看到它的用户设置了display:inline-block,但我遇到了您可能期望的格式问题(列合并或通常混乱)。
我解决这个问题的方法是先显示表,然后为那些我不想看到它的用户执行“display:none”。这样,它可以正常格式化,但在需要时消失。
这是一个横向的解决方案,但可能会帮助到某些人!
visibility:hidden将隐藏元素,但元素是他们的DOM。在display:none的情况下,它会从DOM中移除元素。
你可以为元素选择hide或unhide。但是一旦你删除它(我的意思是不显示),它就没有明确的相反值。Display有几个值,如Display:block, Display:inline, Display:inline-block和许多其他值。你可以从W3C找到它。
在打印机友好的样式表的情况下,我使用以下:
/* 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!