原来隐藏一个DOM元素可以有这么多种方式，最后一种你肯定不知道
myzbx 2025-09-09 07:41 4 浏览
我们在日常编码的时候，隐藏一个 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 将元素脱离文档流才行
小结
通过上面的介绍，相信大家对隐藏元素有了更多的了解和认识了，以后在面对不同的需求时，就可以使用上述不同的方法去匹配相应的需求，从而达到事倍功半的效果。
如果这篇文章对你有帮助，欢迎点赞、关注、转发 ！
相关推荐
- 前端工程师养成计划 专区_前端工程师技能要求
-
前端工程师必修课本课程从最基本的概念开始讲起，步步深入，带领大家学习HTML、CSS样式基础知识，了解各种常用标签的意义以及基本用法，后半部分讲解CSS样式代码添加，为后面的案例课程打下基础。本课程让...
- 深入浅出虚拟 DOM 和 Diff 算法，及 Vue2 与 Vue3 中的区别
-
因为Diff算法，计算的就是虚拟DOM的差异，所以先铺垫一点点虚拟DOM，了解一下其结构，再来一层层揭开Diff算法的面纱，深入浅出，助你彻底弄懂Diff算法原理认识虚拟DOM虚拟...
- css 布局简述_css布局的几种方式
-
本篇简单介绍了css布局体系。包括Flowlayout、display、floats、positionFlowlayout(NormalFlow)CSSFormattingContext...
- dart系列之:HTML的专属领域，除了javascript之外，dart也可以
-
简介虽然dart可以同时用作客户端和服务器端，但是基本上dart还是用做flutter开发的基本语言而使用的。除了andorid和ios之外，web就是最常见和通用的平台了,dart也提供了对HTML...
- 原来隐藏一个DOM元素可以有这么多种方式，最后一种你肯定不知道
-
我们在日常编码的时候，隐藏一个dom元素有很多种方式，今天我们来盘点一下隐藏dom元素有哪些方式，最后一种，你绝对没有用过。display:none作为经常用来隐藏元素的css属性，di...
- JavaScript精通到深入_javascript进阶书籍推荐
-
前几天教大家从入门到精通，当然仅靠那一篇文章是不足以带领大家精通JavaScript的，今天给大家带来第二讲！BOM和DOM简介BOM，BrowserObjectModel,浏览器对象模型。BO...
- 巧克力:从一朵花开始的华丽变身_巧克力花束教程视频
-
世界上几乎所有的巧克力产品，都出自四五家大公司大型工厂里的流水线。然而，“手工制作巧克力”正在成为一种潮流，吸引着越来越多的人沉醉其中。这些娇嫩的花朵，是你吃过的每一块巧克力的开始。可可花直接生长在...
- browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解
-
browser-use可以识别网页中可交互DOM内容，并能与之进行交互。本文将详细介绍browser-use实现这一核心功能的技术细节。一、可交互元素识别browser-use是通过DOMS...
- HTML DOM Progress 对象_html中的对象
-
Progress对象Progress对象是HTML5新增的。Progress对象表示一个HTML<progress>元素。<progress>元素表示任务...
- HTML DOM Script 对象_html document对象
-
Script对象Script对象表示一个HTML<script>元素。访问Script对象您可以使用getElementById()来访问<scrip...
- 虚拟DOM真的比操作原生DOM快吗?前端大神提供4个参考观点!收藏
-
尤雨溪：https://www.zhihu.com/question/31809713/answer/53544875VirtualDOM真的比操作原生DOM快吗？1.原生DOM操作v...
- 前沿|一种新的植入药物或可将HIV的预防时间持续一年
-
国外已经批准了一种叫做Truvada(中文名：特鲁瓦达)的药物用于HIV感染的暴露前预防。但是由于该药需要每天服用，因此有些人可能无法坚持，从而使得该药的预防效果降低。最近一项新的研究或许可以改变这种...
- 轻量级埋点sdk搭建，便捷更全面_埋点工具
-
引言借助埋点监控sdk,我们可以统计用户的点击，页面pv、uv，脚本错误、dom上报等关键信息等。一：项目初始化1.技术栈Tsrollup打包工具2.搭建项目npminit-ytsc--in...
- China's Humanoid Robotics Race Heats Up as Tesla's Optimus Hits a Wall
-
TMTPOST--Tesla'sonce-hypedhumanoidrobotproject,Optimus,hashitasnag.Partsprocurementhas...
- 单机训练速度提升640倍!独家解读快手商业广告模型GPU训练平台Persia
-
【导读】：近期，快手宣布将在2020年春节前实现3亿DAU，快手商业化营收步伐也随之加速。快手从2018年“商业化元年”开始推行个性化的广告推荐。截止5月底，快手DAU已经突破2亿。随着用户和使用时长...
- 一周热门
- 最近发表
-
- 前端工程师养成计划 专区_前端工程师技能要求
- 深入浅出虚拟 DOM 和 Diff 算法，及 Vue2 与 Vue3 中的区别
- css 布局简述_css布局的几种方式
- dart系列之:HTML的专属领域，除了javascript之外，dart也可以
- 原来隐藏一个DOM元素可以有这么多种方式，最后一种你肯定不知道
- JavaScript精通到深入_javascript进阶书籍推荐
- 巧克力:从一朵花开始的华丽变身_巧克力花束教程视频
- browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解
- HTML DOM Progress 对象_html中的对象
- HTML DOM Script 对象_html document对象
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)