CSS之隐藏元素的方法和区别

03-21· 1分钟

隐藏一个元素有三种方法。分别是display:none, visibility:hidden 和 opacity:0

display:none

  1. DOM 结构：浏览器不会渲染该元素并且不会在页面上占据空间；
  2. 事件监听： 无法进行 DOM 事件监听；
  3. 继承：不会被子元素继承，因为子类也不会被渲染；
  4. transition: transition 不支持display；
  5. 性能：动态改变此属性时会引起重排，性能较差(css3 的动画效果在display:none 的时候不耗费性能。)

visibility:hidden

  1. DOM 结构： 元素被隐藏但会被渲染，所以会占据空间；
  2. 事件监听： 无法进行 DOM 事件监听；
  3. 继承：会被子元素继承，并且子元素可以使用 visibility:visible 取消隐藏；
  4. transition：visibility 会被立即显示，隐藏时会延时；
  5. 性能： 动态改变此属性时会引起重绘，性能较高。

opacity:0

  1. DOM 结构： 元素被隐藏但占据空间，因为只是改变透明度；
  2. 事件监听： 可以进行 DOM 事件监听；
  3. 继承： 会被子元素继承且子元素不能使用 opacity:1 取消隐藏；
  4. transition： opacity 可以延时显示和隐藏；
  5. 性能：提升为合成层，不会触发重绘，性能较高。
前端CSS