IT评测·应用市场-qidao123.com

标题: 原来隐蔽一个DOM元素可以有这么多种方式，末了一种你肯定不知道 [打印本页]

作者: tsx81429 时间: 2024-7-23 00:57
标题: 原来隐蔽一个DOM元素可以有这么多种方式，末了一种你肯定不知道
我们在一样寻常编码的时候，隐蔽一个 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: 0 和 overflow: hidden，也能做到隐蔽元素的效果。由于可以把溢出来的内容直接隐蔽掉，从而实现元素隐蔽的效果。

移动元素至视口外

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

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

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

hidden 属性

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

我们还可以设置 aria-hidden 属性，实现无停滞模式下的元素隐蔽

clip-path 裁剪元素

这种方式并不是很常见，由于我们本身在业务中利用 clip-path 的场景不多，这个属性主要的功能就是将元素剪裁成体现地区为一个 1px * 1px 的矩形，如许就在视觉上实现了隐蔽元素的效果

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

如果须要适配低版本浏览器中利用，我们可以利用 clip 属性来实现"隐蔽"的效果

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

小结

通过上面的先容，信赖大家对隐蔽元素有了更多的了解和认识了，以后在面对不同的需求时，就可以利用上述不同的方法去匹配相应的需求，从而到达事倍功半的效果。
如果这篇文章对你有帮助，欢迎点赞、关注➕、转发 ✔ ！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)