display:none、visiblity: hidden、opacity: 0均是用来隐藏元素的。
1、display: none。
DOM结构:被设置了display:none的元素浏览器不会渲染该元素在页面中,也根本不会占据位置;
事件:无法进行事件监听,点击事件没有生效;
性能:通过js无法获取到该元素身上的一些属性,并且通过动态的改变的display属性,会让页面反复渲染,引起页面重排,性能较差;
继承:不会被子类继承,因为自己没被渲染;
transition: 不支持;
如图:
2、 visibility:hidden
DOM结构:被设置了 visibility:hidden的元素浏览器会渲染该元素在页面中,但是被隐藏,也就是说依旧占据位置;
事件:无法进行事件监听,点击事件没有生效;
性能:动态的改变的visibility属性,不会让页面反复渲染该元素,发生的是重绘,性能较好;
继承:会被子类继承,子类要想显示可以给子类添加visibility:visible。
transition: 快速显示,过渡慢慢消失
3、opacity:0
DOM结构:被设置了 opacity:0的元素浏览器会该元素渲染在页面中,但是被隐藏,因为透明度为0,也就是说依旧占据位置;
事件:可以进行事件监听;
性能:动态的改变的opacity属性,不会重排重绘,性能较好;
继承:会被子类继承,但子类并不能添加opacity:1来显示;
transition: 过渡可以生效;