display: none、visibility: hidden与opacity: 0的区别
文章目录
1. display: none、visibility: hidden与opacity: 0的区别
2. 补充:其他隐藏元素的方法
1. display: none、visibility: hidden与opacity: 0的区别
display: none、visibility: hidden与opacity: 0都可以让元素隐藏,它们之间的区别见下表:
表格的解读:
display:none其实很好理解,只要记住设置该属性的元素并不会出现在渲染树中这一点就行了,那么其他的一些特性(行为)想想也知道了:肯定不占据页面空间、不可点击、子节点也不可修改、transition无效,这些其实都是废话,皮之不存,毛将焉附?
display:none属性的添加或去除,相当于在渲染树中增加或删除节点,这对整体页面的结构造成了巨大的影响,结构变了,那肯定得重新计算尺寸、然后再绘制,性能消耗当然大咯~
visibility: hidden只是将元素隐藏了而已,设置该属性的元素还是会出现在渲染树中,其子元素可以通过设置 visibility: visible显示出来。
visibility属性并不会改变页面元素的结构和尺寸,所以只需重新绘制一下即可,性能消耗较小。
opacity: 0只是让元素的透明度变0,它还是存在于渲染树中,并且占据中间、可点击触发事件。
opacity也不对元素的结构和尺寸造成影响,所以只需重新绘制一下即可,性能消耗也较小。
2. 补充:其他隐藏元素的方法
设置position属性值为fixed(absolute、relative)并设置足够大负距离left、top使其“隐藏”;
用层叠关系z-index将元素置于最底层;
设置hight: 0,同时overflow: hidden;
text-indent: -9999px使文字隐藏。
本文参考整理自:
分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景