可见性:隐藏的反面是可见性:可见。同样地,是否有相反的显示:没有?
当一个元素有display: none时,许多人都搞不清楚如何显示它,因为它不像使用visibility属性那么清楚。
我可以只使用visibility: hidden而不是display: none,但它不会产生相同的效果,所以我不会使用它。
可见性:隐藏的反面是可见性:可见。同样地,是否有相反的显示:没有?
当一个元素有display: none时,许多人都搞不清楚如何显示它,因为它不像使用visibility属性那么清楚。
我可以只使用visibility: hidden而不是display: none,但它不会产生相同的效果,所以我不会使用它。
当前回答
在打印机友好的样式表的情况下,我使用以下:
/* 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!
其他回答
在使用react native时,与“none”相对的是“flex”。
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!
对于显示,最好的答案是:没有
display:inline
or
display:normal
你可以使用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>