分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

2022-10-25 14:19:31 浏览数 (1)

display:none

会让元素完全从渲染树中消失,渲染的时候不占据任何空间。不能点击,子孙元素不继承该样式,但是由于display:none元素不渲染,所以子孙不可显示。

visibility:hidden

不会让元素从渲染树消失,渲染元素继续占据空间,只是内容不可见。不能点击,子孙元素继承visibility:hidden样式,可自设置样式visibility:visibile覆盖祖先的visibility:hidden样式,可见的子孙元素和它本身都绑定click事件时,点击子孙元素会触发子孙的click事件,也会冒泡到visibility:hidden元素上

opcity:0

不会让元素从渲染树消失,渲染元素继续占据空间,只是透明度为0,元素不可见,可以点击。

0 人点赞