html中隐藏元素的三种方式与区别

前言：公司的微分享持续一段时间了，恰巧这段时间编写代码见到了一个元素隐藏方面的bug。就此总结，与君共勉。

目录

• 一、display:none
• 二、visibility:hidden
• 三、opacity:0
• 四、补充：重排与重绘

一、display:none

display: none/block

对于display 这个元素时常会在代码中使用到，类似下拉中的提示，相同元素相同点的合并。

display:none
display:block

使用display:none 会让对应元素从页面上消失，DOM结构会消失，所以一定会触发页面的重排重绘，所以不适合非常频繁地到显示隐藏元素。并且由于其消失后，自身绑定的事件更加不会去触发，也不能有过渡效果，其等于从页面上消失，所以被遮挡的元素不受到影响，依然可以正常进行操作。

二、visibility:hidden

visibility: hidden/visible

页面上展示的是隐藏后的效果，DOM中该元素是存在的，只是这时候在一个不可见的状态，只会触发重绘，不会重排，并且在展示上是隐藏了，隐藏后，被遮挡住的元素就可以正常的触发其对应的事件。

常常用作频繁的显示和隐藏

三、opacity:0

opacity: 0;

这个属性就是使用浏览器对alpha数值的更改来达到隐藏遮蔽的效果，相当于元素还存在，只是透明了，我们看不见而已，不会引发重排与重绘，但是相当于透明，其自身事件还是可以触发出来的，被其遮挡的元素是不会触发其事件的。

四、补充：重排与重绘

上面提到了重绘与重排，这里就简单的分享下，对重排与重绘的理解。

4.1 重排

概念：当DOM的变化影响了元素的位置和尺寸大小，浏览器需要重新对集合元素进行计算元素，并且将其安放在界面中的正确位置，这个过程叫重排序。说的简单点就是重新生成布局，重新对元素进行排列。

常见的发生重排的情况：

• 页面初始化渲染
• 修改可视DOM元素（添加、删除等）
• 修改元素的位置、尺寸（宽度、高度、边距等）
• 修改元素内容、字体大小
• 修改浏览器窗口大小

4.2 重绘

概念：当元素的可视外观发生改变，而且没有改变布局，重新把元素的外观绘制出来，就是重绘。

• 重绘：某些元素的外观被改变。
• 重排：重新生成布局，重新排列元素。