我们在日常编码的时候,隐藏一个 dom  元素有很多种方式,今天我们来盘点一下隐藏 dom 元素有哪些方式,最后一种,你绝对没有用过。

display: none

作为经常用来隐藏元素的 css 属性,display: none 相信大家并不陌生,使用了 display: none 会直接将元素从文档树中隐藏掉。

图片

一旦元素使用了 display: none 之后,这个元素就从文档树中隐藏掉了。

visibility: hidden

作为经常和 display: none 进行比较的属性 visibility: hidden ,也可以用来隐藏一个 DOM 元素,但是唯一不同的是 visibility: hidden 隐藏的元素仍然会存在文档流中,也就是说它仍然会占据页面的位置空间,只是不可见而已。

图片

opacity

opacity 属性也是同样的类似的实现原理,通过调整元素的透明度来实现元素 “隐身”的效果。

图片

同样也是占据文档流的。

text-index

text-indent 设置区块元素中文本行前面空格(缩进)的长度, 因此如果我们想要隐藏的元素是文本内容的时候,我们就可以使用这个属性将文本缩进到视口范围之外,从而达到隐藏的效果。

图片

只针对只包含文本内容的容器有效

overflow 溢出隐藏

通过设置容器的 height: 0overflow: hidden,也能做到隐藏元素的效果。因为可以把溢出来的内容直接隐藏掉,从而实现元素隐藏的效果。

图片

移动元素至视口外

我们还可以通过障眼法,将元素脱离文档流并将其移动到视口外面实现元素隐藏的效果。实现这一效果可以通过

  • 绝对定位 + 任意方向的定位值设置无穷大

图片

  • transform 将元素进行变化,实现位置在视口外

图片

hidden 属性

hidden 属性是最简单的,直接在元素上设置 hidden 属性就可以了, 而且 添加完之后的元素是不会占据原先的文档位置。

图片

我们还可以设置 aria-hidden 属性,实现无障碍模式下的元素隐藏

图片

clip-path 裁剪元素

这种方式并不是很常见,因为我们本身在业务中使用 clip-path 的场景不多,这个属性主要的功能就是将元素剪裁成显示区域为一个 1px * 1px 的矩形,这样就在视觉上实现了隐藏元素的效果

图片

clip-path 有一些小小的兼容性问题,但是基本上问题不大。

图片

如果需要适配低版本浏览器中使用,我们可以使用 clip 属性来实现"隐藏"的效果

图片

使用 clip 属性的时候,要先通过 position: absolute 将元素脱离文档流才行

图片

小结

通过上面的介绍,相信大家对隐藏元素有了更多的了解和认识了,以后在面对不同的需求时,就可以使用上述不同的方法去匹配相应的需求,从而达到事倍功半的效果。

如果这篇文章对你有帮助,欢迎点赞、关注➕、转发 ✔ !


前端蛋卷
238 声望4 粉丝