原来隐藏一个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: 0overflow: hidden,也能做到隐藏元素的效果。因为可以把溢出来的内容直接隐藏掉,从而实现元素隐藏的效果。

移动元素至视口外

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

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

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

hidden 属性

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

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

clip-path 裁剪元素

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

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

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

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

小结

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/47560.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【常见开源库的二次开发】基于openssl的加密与解密——MD5算法源码解析(五)

一、MD5算法分析 : 1.1 关于MD5 “消息摘要”是指MD5(Message Digest Algorithm 5)算法。MD5是一种广泛使用的密码散列函数,它可以生成一个128位(16字节)的散列值。 RFC 1321: MD5由Ronald Rivest在1992…

云计算核心算法(一)

目录 一、Paxos算法(一)Paxos算法背景知识(二)Paxos算法详解(三)Paxos算法举例 云计算的基础技术是集群技术,支撑集群高效协同工作需要一系列资源和任务调度算法,良好的调度算法可以…

【python】Numpy运行报错详细分析:IndexError: too many indices for array

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,…

创建vue3项目并配置PC端屏幕适配

一、创建vue3项目 1.使用vue cli创建 vue created 项目名2.选择自定义方式创建vue3项目 3.选择项目所需要的依赖项(刚学习vue的同学建议选择安装(Linter / Formatter 支持代码风格检查和格式化) 对于每一项的功能,做了一个简单的描述&a…

Web开发:一个可拖拽的模态框(HTML、CSS、JavaScript)

目录 一、需求描述 二、实现效果 三、完整代码 四、实现过程 1、HTML 页面结构 2、CSS 元素样式 3、JavaScript动态控制 (1)获取元素 (2)显示\隐藏遮罩层与模态框 (3)实现模态框拖动效果 一、需求…

增长新引擎,构建基于 CDP 的用户运营竞争力

本文将围绕“企业如何通过构建基于 CDP 的用户运营体系提升业务增长”这一核心,详细介绍企业数据化运营现状,拆解用户运营目标,展示神策 CDP 的关键能力以及用户运营策略落地的完整路径。 一、洞察:企业数据化运营面临的挑战 当前…

C语言-网络编程-UDP通信创建流程

UDP 通信创建流程 UDP 是⼀个传输层的⽆连接的协议,我们编写代码⼀般是分为两个端。⼀个我们称之为发送端,另⼀ 个我们称之为接收端。正常⼀般是接收端先运⾏,然后等待结束发送端发送过来的数据。 创建套接字 首先,我们需要创建…

四、GD32 MCU 常见外设介绍 (5) TIMER 模块介绍

5.1.TIMER 基础知识 TIMER分高级定时器,通用定时器L0,L1,L2和基本定时器。 5.2.硬件连接说明 TIMER 属于片内外设,对于外部硬件设计,只需要单独IO口外接信号线即可。 5.3.GD32 TIMER 外设原理简介(以 G…

SqlSugar介绍及应用场景及常用操作

SqlSugar介绍及应用场景 1. 真正可以实现零SQL的ORM 建表、索引和CRUD全部支持 2. 支持 .NET 百万级大数据写入、更新、分表和拥有几十亿查询统计成熟解决方案 3. 支持 SAAS 完整应用 :跨库查询 、审计、租户分库 、租户分表 和 租户数据隔离 4. 支持低代码…

/秋招突击——7/21——复习{堆——数组中的第K大元素}——新作{回溯——全排列、子集、电话号码的字母组合、组合总和、括号生成}

文章目录 引言复习数组中的第K大的最大元素复习实现参考实现 新作回溯模板46 全排列个人实现参考实现 子集个人实现参考实现 电话号码的字母组合复习实现 组合总和个人实现参考实现 括号生成复习实现 总结 引言 昨天的科大讯飞笔试做的稀烂,今天回来好好练习一下&a…

JUC并发编程02-常见方法

start方法与run方法 直接调用run方法-》主线程实现,并不会启动一个新线程。多次调用start方法-》会抛出非法线程异常的错,当线程变成了runnable状态就不能用start方法了。 sleep方法与yield方法 调用sleep会让当前线程从running进入 timed waiting状态…

测试——Junit

内容大纲: 常用的五个注解 测试用例顺序指定 参数化 测试套件 断言 1. 常用的五个注解 1.1 Test 通常情况下,我们输入要写在main方法下,此时我想直接输出: Test void Test01(){System.out.println("第一个测试用例"); } 1.2 BeforeAll AfterAll BeforeALL在Tes…

软件设计模式: 抽象工厂

抽象工厂 一、解决的问题 抽象工厂模式主要解决了在具有多个产品族的情况下,如何统一管理创建相关产品对象的问题。 当系统需要创建一系列相互关联或相互依赖的对象,并且这些对象可以形成多个不同的产品族时,如果直接由客户端去分别创建这…

使用工作流产生高质量翻译内容的实战教程

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…

Mybatis——动态SQL常用标签

IF 配置&#xff1a; public interface BlogMapper {// 查询博客List<Blog> queryBlogIF(Map map);} <select id"queryBlogIF" parameterType"map" resultType"blog">select * from mybatis.blog where 11<if test"title …

ISO 26262在汽车软件开发中的作用

ISO 26262是汽车功能安全的国际标准&#xff0c;它为道路车辆中安全关键型电子电气&#xff08;E/E&#xff09;系统的开发提供了全面的指导和要求。ISO 26262的目标是确保汽车系统在各种情况下都能保持安全性能&#xff0c;从而降低事故风险。 ISO 26262的实施对汽车软件开发…

RK3568笔记四十一:DHT11驱动开发测试

若该文为原创文章&#xff0c;转载请注明原文出处。 记录开发单总线&#xff0c;读取DHT11温湿度 一、DHT11介绍 DHT11是串行接口&#xff08;单线双向&#xff09;DATA 用于微处理器与 DHT11之间的通讯和同步&#xff0c;采用单总线数据格式&#xff0c;一次通讯时间4ms左右…

利用一维数组计算今天是今年的第几天

分析&#xff1a; 在一维数组里初始化12个月份&#xff0c;在进行判断是不是闰年&#xff0c;是闰年就把数组的二月的下标改为29&#xff0c;否则不变就按照平年计算&#xff0c;最后把想要计算的月份减1累加到sum里&#xff0c;在进行计算该月份的天也要累加。例如&#xff1a…

神经网络处理器模拟器的一点思考

一 神经网络处理器 通常基于FPGA的神经网络处理器进行部署某种网络&#xff0c;考虑的因素较多&#xff0c;具体包括网络模型的不同&#xff0c;涵盖不同的算子、激活函数、调度策略等等&#xff1b;具体硬件实现&#xff0c;涉及神经网络处理器并行度、硬件资源消耗&#xff0…

java高级——Collection集合之Set探索(底层为HashMap实现)

java高级——Collection集合之Set探索 前情提要文章介绍继承结构底层代码&#xff08;一张图你就悟了&#xff09;下期预告 前情提要 上一篇文章我们探索了HashMap&#xff0c;详细解说了哈希冲突&#xff0c;红黑树以及Map底层到底是怎么实现的&#xff0c;这一篇我们简单说一…