隐藏元素的几种方法

一般来说有四种，visibility：hidden、display：none、opacity：0、position：absolute&top,left 负的极大值（元素移出视线范围）

他们的区别主要分为：元素在文档中的位置，是否可以继承&反继承，是否可交互，是否可以添加transition属性。

 

1.display：none

浏览器不会渲染display为none的元素，在文档中没有位置，改变该属性会发生重绘；

并不会被子类继承，但是子类不会显示…因为一起被隐藏了；

不可交互，transition属性无效。

 

2.visibility：hidden

在文档中依然占据位置，只是不可见；

会被子类继承，子类也可以通过visibility：visible来反隐藏，改变该属性会发生重绘；

不会触发该元素已绑定事件；

transition无效

 

3.opacity=0

只是元素透明度为100%，文档中依然占据位置，

会被子类继承，但子类不能通过opacity=1来反隐藏，

依然能触发该元素已绑定事件

tansition有效

 

4.position:absolute + top:-9999px + left:-9999px

元素移出可视区域，不影响布局

子类跟随一起移出视区……

依然可以绑定事件，把hide移回视区

可以添加transition属性