前端面试题:设置元素显示隐藏的几种方式与它们之间的区别是什么?

前端面试题:设置元素显示隐藏的几种方式与它们之间的区别是什么?

常见隐藏元素的方法有opacity:0; visibility:hidden; display:none; transform:scale(0);height:0px;
他们之间的区别是:

opacity:0; 是把透明度设置为0,但是这个元素还是真实存在的,只是看不见了而已,他在页面中依然占位,所有的点击事件也都是可以触发的;

visibility:hidden; 他在页面中的效果和opacity:0;有一点相似,他也是看不见的,并且在页面中依然占位,但是不同的是它不能够触发点击事件;

display:none;和他们就不一样了,它属于是完全删除的状态,相当于不存在于页面当中了,因此它不占位,也不能触发点击事件。

transform:scale(0);使用缩放,按照x和y的中心位置进行缩小占位置

height:0px;的时候不占页面空间如果元素中有文本的话需要给元素添加oveflow:hidden;font-size:0px

猜你喜欢

转载自blog.csdn.net/sdasadasds/article/details/126992515