百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

原来隐藏一个DOM元素可以有这么多种方式,最后一种你肯定不知道

yuyutoo 2025-03-14 22:14 1 浏览 0 评论

我们在日常编码的时候,隐藏一个 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 将元素脱离文档流才行

小结

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

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

相关推荐

为何说 :has() 选择器是对CSS架构的重塑?

大家好,很高兴又见面了,我是"...

不得不知的网络安全知识(网络 安全知识)

本文最初发布于BitsandPieces...

从凌晨发布的Manus到3小时复刻的OpenManus

前言2025/3/5凌晨一点半前后,手机里陆续收到一些公众号推文,Manus,LeaveittoManus,感觉一片喧哗,有点Agent里面的Deepseek类似赶脚,索性去注册了,Sorry...

JAVA安全加密通信协议详解(java密码加密哪种方式最安全)

JAVA安全加密通信协议详解在当今这个数字化时代,数据安全变得越来越重要。无论是在企业内部还是互联网上,保护敏感信息免受恶意攻击都是一项至关重要的任务。因此,了解并掌握安全加密通信协议对于每一位开发者...

两篇文章介绍:全新Swift从入门到进阶实战探探iOS APP(完结)

"夏哉ke":quangneng.com/5131/《全新Swift从入门到进阶实战探探iOSAPP》这一课程或书籍主要聚焦于使用Swift语言来开发iOS应用程序,尤其以“探探”这样的社交应用作为...

你写的JSP代码正在拖垮系统90%开发者不知道的过时陷阱与重生法则

"2024年了,我的团队还在用JSP!"某电商平台凌晨崩溃的监控警报,竟源自一行20年前的JSP代码逻辑。这个曾经统治JavaWeb的技术,正在用最隐蔽的方式摧毁你的系统性能......

Java jakarta常用注解详解(java validate注解)

持久化注解JakartaPersistence注解是...

网页出现 403 forbidden 是什么意思?

网页出现403forbidden是什么意思?“403forbidden”是一个HTTP状态码(HTTPSTATUSCODE),它的含义非常好理解。就是:...

孝琳《Queendom2》实力碾压难超越!韩网跪了:其他团来争第2的

记者刘宛欣/综合报导南韩女团竞赛节目《Queendom2》正如火如荼地进行中,日前播出6组人马的第二次竞演,其中以SOLO出击的孝琳继首次竞演拿下满分登冠军宝座后,第二次竞演又毫无悬念满分获得第一,...

《Queendom》排名公开(G)I—DLE夺第一 mamamoo展超强实力位列亚军

人民网讯5日,韩国最新综艺节目《Queendom》播出并公开了竞演排名。在本期节目中,人气女团OHMYGIRL演唱了《秘密花园》,(G)I-DLE将《LATATA》唱出十足底气,Lovelyz则...

React 4、路由库react-router-dom

在React应用中,路由(Routing)是一个关键的功能,它允许用户在不同页面或视图之间导航,而无需重新加载整个页面。React本身并不提供内置的路由功能,但你可以使用第三方库来实现路由。最常...

美人计 | 不管你追哪个团,都去看《Queendom》

以后也别选新的女团了,就让实力与美貌并存的姐姐们神仙打架就挺好。这个综艺8月底开播,最新一期是在十一假期的时候播出,它是Mnet推出的以女团同时回归对决的新概念综艺。参赛的6组都是已出道并且成绩相当不...

理念:无冲突的扩展本地DOM原型(俄乌冲突最新消息)

正如我昨天在博文中指出,我不喜欢使用jQuery的原因之一是因为它的包装对象。对于jQuery来说,这是一个明智的决定:早在2006年它被第一次开发出来的时候,IE有一个非常讨厌的内存泄漏bug,当我...

虚拟DOM真的比操作原生DOM快吗?前端大神提供4个参考观点!收藏

尤雨溪:https://www.zhihu.com/question/31809713/answer/53544875...

DOM丨睡不好伤肾更伤肝真的有证据!

点击蓝字...

取消回复欢迎 发表评论: