原来隐藏一个DOM元素可以有这么多种方式，最后一种你肯定不知道
原来隐藏一个DOM元素可以有这么多种方式，最后一种你肯定不知道
在网页开发中，隐藏DOM元素是一个常见的需求。本文将为您详细介绍8种不同的隐藏元素方法，从常用的
display: none到鲜为人知的clip-path裁剪，每种方法都有其独特之处和适用场景。
display: none
作为经常用来隐藏元素的CSS属性，display: none相信大家并不陌生。使用了display: none会直接将元素从文档树中隐藏掉。一旦元素使用了display: none之后，这个元素就从文档树中隐藏掉了。
visibility: hidden
作为经常和display: none进行比较的属性，visibility: hidden也可以用来隐藏一个DOM元素。但是唯一不同的是，visibility: hidden隐藏的元素仍然会存在文档流中，也就是说它仍然会占据页面的位置空间，只是不可见而已。
opacity
opacity属性也是同样的类似的实现原理，通过调整元素的透明度来实现元素“隐身”的效果。同样也是占据文档流的。
text-indent
text-indent设置区块元素中文本行前面空格（缩进）的长度。因此，如果我们想要隐藏的元素是文本内容的时候，我们就可以使用这个属性将文本缩进到视口范围之外，从而达到隐藏的效果。只针对只包含文本内容的容器有效。
overflow 溢出隐藏
通过设置容器的height: 0和overflow: hidden，也能做到隐藏元素的效果。因为可以把溢出来的内容直接隐藏掉，从而实现元素隐藏的效果。
移动元素至视口外
我们还可以通过障眼法，将元素脱离文档流并将其移动到视口外面实现元素隐藏的效果。实现这一效果可以通过：
- 绝对定位 + 任意方向的定位值设置无穷大
transform将元素进行变化，实现位置在视口外
hidden 属性
hidden属性是最简单的，直接在元素上设置hidden属性就可以了，而且添加完之后的元素是不会占据原先的文档位置。我们还可以设置aria-hidden属性，实现无障碍模式下的元素隐藏。
clip-path 裁剪元素
这种方式并不是很常见，因为我们本身在业务中使用clip-path的场景不多。这个属性主要的功能就是将元素剪裁成显示区域为一个1px * 1px的矩形，这样就在视觉上实现了隐藏元素的效果。clip-path有一些小小的兼容性问题，但是基本上问题不大。
如果需要适配低版本浏览器中使用，我们可以使用clip属性来实现"隐藏"的效果。
使用clip属性的时候，要先通过position: absolute将元素脱离文档流才行。
小结
通过上面的介绍，相信大家对隐藏元素有了更多的了解和认识了。以后在面对不同的需求时，就可以使用上述不同的方法去匹配相应的需求，从而达到事倍功半的效果。