隐藏元素方式总结

CSS 隐藏元素 display、visibility、opacity 的区别

完全隐藏

元素从渲染树中消失，不占据空间

• display:none：让元素从渲染树中消失，渲染时不占用任何空间

  • 非继承属性，子节点是因为父元素从渲染树中消失了，所以也就消失了，修改子节点的属性也没用
  • 修改常规流中的display通产会造成文档重排
  • 读屏器不会读取display:none的元素内容
  • 元素仍然在DOM树中，但不会进入渲染树

• hidden属性：H5新增元素属性，相当于display:none

视觉上的隐藏

仅屏幕中不可见，仍在渲染树中，占据空间

• opacity: 0：实际上是元素的透明度为 0。

  • 子元素 opacity:1 是无效的，元素仍旧无法显示。
  • 绑定的事件仍旧可以触发。

• visibility: hidden：

  • 继承属性，子孙节点因为继承了visibility: hidden因此消失，更改属性可以显示出来
  • 修改visibility只会使本元素重绘
  • 绑定的事件不能触发。

• 其它：

  • 利用绝对定位，设置一个很大的 left 负值定位，使元素定位在可见区域之外
  • 宽高为0，overflow: hidden
  • filter: blur(0); CSS3 属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中

语义上的隐藏

读屏软件不可读，但正常占据空间

aria-hidden="true"使读屏软件不可读，但元素仍占据空间并可见