将页面元素隐藏的10种方法

news/2024/11/23 3:25:13/

在Web开发中,隐藏页面元素使其视觉不可见是一个非常常见的需求。为了实现这一目标,我们通常会采用多种方法,最常用的例如CSS的display属性,只要设置为node即可隐藏元素。
本文将通过对当前所有可用的隐藏元素的方法做一个总结,大概有10种方法可以使用,一一做下介绍。

所有方法的总结在文章的最后,可以跳过前文。

display:none

display 属性用于设置页面元素的显示方式,能够控制元素的显示或者隐藏,当它的值被设置为 none 时,就会隐藏对应的元素,使其不可见。
这种方法是最常用的隐藏元素的方法,可以让元素在网页中完全消失,不会占据页面上的任何空间,用户无法看到或进行交互。
但是,这样也会导致元素脱离文档流,可能会影响其他元素的布局。

<div class="elem">这是一个要隐藏的元素。
</div>
.elem {display: none;
}

visibility:hidden

visibility 属性是专门用于控制元素的显示和隐藏,当它的值设置为 hidden 后,也会将元素隐藏。
但与 display 不同的地方在于,此时元素仍会占据页面上的空间,只是在视觉上不可见,显示为空白区域(所占区域为元素的大小)。
这种方式也是无法进行元素的响应事件监听和交互状态,通常应用于需要隐藏但仍需要占据空间的元素,如占位符、提示信息等。

.elem {visibility: hidden;
}

opacity: 0

opacity 属性用于控制元素的透明度,取值范围:0 - 1,0 表示完全透明,1 表示不透明。
当我们将元素的 opacity 属性设置为 0 时,该元素将会变为不可见状态,不过它仍会占据页面上的空间。

.elem {opacity: 0;
}

这种方式隐藏的元素,都是视觉上不可见,和 visibility:hidden 比较类似。
但不同的地方在于:opacity: 0 设置元素不可见以后,用户仍然能够与该元素进行交互,而 visibility:hidden 则不行。

.elem {opacity: 0;
}
.elem:hover {opacity: 0.5;
}
<div class="elem" onclick="alert(1)">这是一个要隐藏的元素。
</div>

如上代码所示,div.elem 元素设置 opacity: 0 不可见以后,onclick 鼠标点击事件会响应,hover 状态也会执行。

position

position 属性用于控制元素的定位方式,可以将元素在页面的不同位置进行定位,有多个取值,也是css中非常重要的属性,但我们这里只讨论如何隐藏元素。
position 取值相对定位或者绝对定位时,给定(left/top/right/bottom)四个方向上的任意一个较大的值(或负值),都能将元素设置到屏幕之外,达到不可见的状态。

在使用上,相对定位和绝对定位有一定的区别。
绝对定位的元素会脱离当前文档流,整个从视觉上完全消失,效果上与 display:none 相似。

.elem {position: absolute;left: -9999px;
}

而相对定位则只是将元素移出,在当前位置仍然会占据一定的空间,效果上与 visibility:hidden 较相似。

.elem {position: relative;top: -9999px;
}

但使用的定位的方式使元素不可见,都无法再与元素进行交互操作。

在绝对定位时,还可以通过 z-index 属性将元素的层级调低,让它被其他元素遮挡,达到一定的隐藏效果。

clip-path:circle(0%)

clip-path 属性,允许用不同的剪切方式创建元素的可显示区域,区域内的内容可以展示,区域外的内容则隐藏。之前也有博文详细介绍该属性,clip-path详解
根据它的特点,如果将元素的所有内容都设置到显示区域外,则元素就自动隐藏了,达到不可见的状态,而要实现这点只需要剪切区域设置为0,有多个形状值可以实现:

.elem {clip-path: circle(0%);clip-path: inset(50%);clip-path: polygon(0 0);
}

这种方式隐藏的元素,虽然不可见,但仍然会占据自身大小的空间,效果上与 visibility:hidden 相似。并且也不能响应事件监听和各种交互状态。

filter:blur(500px)

filter 属性是CSS3开始提供的,用于对页面元素设置各种滤镜效果,有大概十多个各种不同的滤镜值可以设置,我们这里使用 blur 模糊效果来达到隐藏页面元素的效果。

只需要将 blur() 值设置为一个较大的值,元素将模糊到无法显示的地方,如值大于400:

.elem {filter: blur(500px);
}

通过以上代码,就能将元素进行隐藏了,他的效果与使用 opacity: 0 一样,元素虽不可见,但仍占据空间,并且能够响应事件和交互状态。

注意:filter:opacity(0) 透明滤镜与 opacity: 0 也一样。

HTML Element 的 hidden 属性

通过设置页面元素(Element)的 hidden 属性,也能够将元素进行隐藏,它达到的效果与 display:none 几乎一样,元素脱离文档流、不可见,不占用空间,无法响应事件和用户交互等。

<div hidden>这个元素将被隐藏,不占用空间,无法交互。</div>

以上方式,针对的页面元素,是不区分块状元素和行内元素,都能够达到隐藏效果,下面还有几种方式,可能针对特定的元素才起作用。

width: 0

这个方式代表一类隐藏元素的方法,即通过设置元素的宽高属性为 0,达到隐藏元素的效果。
注意,行内元素无法设置宽高属性,所以这种方法一般处理块状元素。

.elem {width: 0;height: 0;
}

以上代码,就能将块状元素进行隐藏,不占据空间,并且这种方式隐藏的块状元素也无法响应事件和交互状态。

但如果块状元素内包含文字,则文字内容仍然会显示,并且呈竖状:

在这里插入图片描述
因此,这类方法平时很少会使用。
那如果想把文本内容也隐藏,有没有办法呢?那就要用到下面的属性了。

font-size: 0

font-size 用于设置文字的大小,当我们把它的值设置为 0 时,文本内容就不可见。

.elem {font-size: 0;
}

如果是行内元素,或者块状元素内只包含文字,则单独使用 font-size: 0 都可以隐藏。
但我们可以结合宽高和文字大小属性一起使用,就能达到完整的隐藏效果,而不分块状元素还是行内元素,都能起作用:

.elem {width: 0;font-size: 0;
}

这种方式,行内元素将占据空间,而块状元素则不占,都无法进行交互。

transform:scale(0)

transform 属性用于对元素进行变换,例如旋转、缩放、平移等。其中,缩放 scale 就可以用来隐藏元素使用,只需要将 scale 的值设置为 0,该元素就会被缩放到不可见的状态,达到隐藏效果:

.elem {transform: scale(0);
}

需要注意的是,transform:scale(0) 达成的隐藏效果,无法作用于行内元素,这是由于 transform 属性本身对行内元素不起作用。
并且,这种隐藏方式也会占用页面空间(元素的原始大小区域),但元素实际上宽高都为0,同样无法响应事件和交互。

其他

以上多数都是通过设置 css 属性达成的页面元素隐藏效果,但在前端开发中,很多时候,我们需要使用 JavaScript 来控制页面元素,包括隐藏也是一样的。
如,我们使用 JavaScript 代码来控制元素的 sdiplay 属性,以便可以隐藏或显示元素:

const element = document.getElementById('elementId')
element.style.display = element.style.display === 'none' ? 'block' : 'none'

以上代码,就是获取到元素对象,通过设置 style 样式对象的 display 属性,控制了它的隐藏和显示。

除此以外,我们还可以使用 JavaScript 对象将页面元素删除,如果要显示还可以再添加回来,通过这种方式也能达成影响和显示的效果:

const element = document.getElementById('elementId')
document.body.removeChild(element)
setTimeout(() => {document.body.appendChild(element)
}, 3000)

如上代码所示,我们将元素先通过文档对象的 removeChild 方法进行删除,再定时3秒以后,把该元素添加到文档中,这样,可算是隐藏和显示了。

总结

以上就是关于Web页面隐藏元素的10种方法(除去了JavaScript的方法),每种方法都有自身的特点,我们在实际开发过程中,需要根具体的需求和场景来选择最合适的方法。
下面,是针对这些方法的一个总结:

在这里插入图片描述


http://www.ppmy.cn/news/61475.html

相关文章

linux部署k8s

linux部署k8s 0、k8s的前世今生1、下载k8s2、k8s文档2.1、容器化部署的优越性2.1.1、Traditional deployment era2.1.2、Virtualized deployment era2.1.3、Container deployment era 3、安装k8s3.1、Install kubectl on Linux3.2、 0、k8s的前世今生 参考链接: https://kuber…

ETO、MTO、ATO与MTS(按单设计、按单生产、按单装配和库存生产)

按照企业组织生产的特点&#xff0c;可以把制造企业划分为ETO、ATO、MTO与MTS&#xff08;按单设计、按单装配、按单生产和库存生产&#xff09;四种生产类型。 按单设计&#xff08;Engineer To Order&#xff0c;ETO&#xff09;   在这种生产类型下&#xff0c;一种产品在…

读书:《素书新解》(一)

黄石公的《素书》&#xff0c;分六章&#xff1a;原始、正道、求人之志、本德宗道、遵义、安礼&#xff0c;共132句&#xff0c;1636字。 夫道、德、仁、义、礼&#xff0c;五者一体也。 我问了一下ChatGPT&#xff0c;给出五者的更详细的解释。 道、德、仁、义、礼是中国传…

浅谈明日方舟游戏系统

主要玩法&#xff1a;敌方阵营从敌方初始点进入战斗并且沿着怪物前进路线行驶到己方保护目标。玩家可以通过部署干员守护己方保护目标&#xff0c;防止敌方阵营进入&#xff1b;当保护目标的生命值为0时&#xff0c;则战斗失败&#xff0c;任务结束。 1 干员系统 1.1 职业分支…

【人工智能与深度学习】基于能量的模型(续——损失函数)

【人工智能与深度学习】基于能量的模型(续——损失函数) 架构和损失泛函数设计一个好的损失函数损失函数示例能量损失 (Energy Loss)负对数似然损失 (Negative Log-Likelihood Loss)感知器损失 (Perceptron Loss)广义边际损失示例合页损失 (Hinge Loss)对数损失(Log Loss)平…

身份鉴别解读与技术实现分析(1)

6.1.4.1 身份鉴别 本项要求包括: a) 应对登录的用户进行身份标识和鉴别,身份标识具有唯一性,身份鉴别信息具有复杂度要求并定期更换; b) 应具有登录失败处理功能,应配置并启用结束会话、限制非法登录次数和当登录连接超时自动退出等相关措施 在等级保护体系中,级别越高…

k8s二进制安装部署(详细)(3主2从)

目录 kubeadm 和二进制安装 k8s 适用场景分析 多 master 节点高可用架构图 集群环境准备 部署过程 修改主机内核参数&#xff08;所有节点&#xff09; 配置阿里云的repo源&#xff08;所有节点&#xff09; 配置国内安装 docker 和 containerd 的阿里云的 repo 源 配置…

【Java开发】Spring Cloud 11:Gateway 配置 ssl 证书(https、http、域名访问)

最近研究给微服务项目配置 ssl 证书&#xff0c;如此才可以对接微信小程序&#xff08;需要使用 https 请求&#xff09;。传统单体项目来说&#xff0c;首先往项目中添加证书文件&#xff0c;然后在配置文件中配置 ssl 证书路径、密码等相关信息&#xff1b;那么微服务这么多项…