分析比较 opacity: 0、visibility: hidden、display: none

1、三个属性分别是什么？

1.1、opacity属性：指定了一个元素的透明度，值：number 类型的值，0~1。

1.2、visibility属性：显示或隐藏元素而不更改文档的布局，值：visible、hidden、collapse。

1.3、display属性：指定了元素的显示类型，被设置成none的元素，将从可访问性树中移除，包括其子元素在内。

2、三个属性的区别

2.1、结构上：

display：none — 会让元素完全从渲染树中消失，渲染的时候不占据任何空间，不能点击

visibility：hidden — 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击

opacity：0 — 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

2.2、继承性：

display：none 和 opacity：0 是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示

visibility：hidden 是继承属性，子孙节点消失是由于继承了 visibility：hidden，通过设置 visibility：visible 可以让子孙节点显示

2.3、性能：

display：none 修改元素会造成文档回流，读屏器不会读取 display：none 元素的内容, 性能消耗较大

visibility：hidden 修改元素只会造成本元素的重绘，读屏器会读取元素内容，性能消耗较少

opacity：0 修改元素可能会造成本元素的重绘，性能消耗较少

3、总结

	DOM 结构	事件监听	性能	继承
display：none	元素完全从渲染树中消失，渲染的时候不占据任何空间	不能点击	造成文档回流，消耗大	非继承属性
visibility：hidden	元素不从渲染树消失，渲染元素继续占据空间，只是内容不可见	不能点击	造成元素重绘，消耗中	继承属性
opacity：0	元素不从渲染树消失，渲染元素继续占据空间，只是内容不可见	可以点击	不定是否重绘，消耗少	非继承属性