在Web开发中,隐藏页面元素使其视觉不可见是一个非常常见的需求。为了实现这一目标,我们通常会采用多种方法,最常用的例如CSS的display属性,只要设置为node即可隐藏元素。
本文将通过对当前所有可用的隐藏元素的方法做一个总结,大概有10种方法可以使用,一一做下介绍。
所有方法的总结在文章的最后,可以跳过前文。
display:none
display
属性用于设置页面元素的显示方式,能够控制元素的显示或者隐藏,当它的值被设置为 none
时,就会隐藏对应的元素,使其不可见。
这种方法是最常用的隐藏元素的方法,可以让元素在网页中完全消失,不会占据页面上的任何空间,用户无法看到或进行交互。
但是,这样也会导致元素脱离文档流,可能会影响其他元素的布局。
<div class="elem"> 这是一个要隐藏的元素。 </div>
.elem { display: none; }
visibility:hidden
visibility
属性是专门用于控制元素的显示和隐藏,当它的值设置为 hidden
后,也会将元素隐藏。
但与 display
不同的地方在于,此时元素仍会占据页面上的空间,只是在视觉上不可见,显示为空白区域(所占区域为元素的大小)。
这种方式也是无法进行元素的响应事件监听和交互状态,通常应用于需要隐藏但仍需要占据空间的元素,如占位符、提示信息等。
.elem { visibility: hidden; }
opacity: 0
opacity
属性用于控制元素的透明度,取值范围:0 - 1,0 表示完全透明,1 表示不透明。
当我们将元素的 opacity
属性设置为 0
时,该元素将会变为不可见状态,不过它仍