如何隐藏DOM元素

隐藏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元素的，还需要配合以上的集中方法来使用。这种方式只是起到美化作用，让屏幕无法“读”到该元素。