如何隐藏DOM元素

2017年02月26日Web前端0

隐藏DOM元素是对DOM操作中一个很平常的事情,让我们更进一步的了解这些方式吧!

隐藏的方式

常见的方式有:

  1. 设置元素的opacity为0(IE9+)。
  2. 设置元素的display为none。
  3. 设置元素的visibility为hidden。
  4. 设置元素的position为absolute,并移动到不可见区域(同设置text-indent为-999)。
  5. 设置元素的clip属性。
  6. 设置元素属性值hidden。(IE8+)
  7. 设置元素的font-size、line-height、width、height为0。
  8. 设置元素的transform的translateX或translateY为-100%。

差异性

其实,这些隐藏方式是有所不同的,有些DOM只是屏幕上不可见,但是会被屏幕“读”出来,即仍是可访问的。将这些隐藏方式以可访问性划分为完全隐藏和视觉上隐藏。

完全隐藏

方式中的2、3、6。 虽然这些方式让DOM不会被屏幕“读”到,但是他们还是有相当大的区别的。display:none;是隐藏且不会占据位置,而visibility:hidde却会占据原先的位置。通过设置元素的hidden属性为ture,浏览器在渲染的时候会把该元素隐藏。

视觉上隐藏

剩下的所有方法,当然完全隐藏就是视觉上隐藏。

语义上隐藏

很简单,只需要在元素上添加属性aria-hidden=“true”。当然该方式是不能隐藏DOM元素的,还需要配合以上的集中方法来使用。这种方式只是起到美化作用,让屏幕无法“读”到该元素。