百度360必应搜狗淘宝本站头条
mybatis 使用python中+=代表什么java中switch盒子垂直居中httpservletrequest 获取参数
当前位置：网站首页 > 技术文章 > 正文

使用CSS隐藏页面元素的几种方法，你知道它们的具体区别吗?

wxin55 2024-10-26 16:30 17 浏览 0 评论

前言

一说起隐藏HTML页面上的元素，很多人第一反应就是设置元素的css属性display:none;值，这是一种最常见的隐藏页面元素方法。本篇文章我们就一起看看使用CSS隐藏页面元素的方法，以及它们的区别。

本篇文章中的例子直接放到github地址中，感兴趣的同学可以自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/hideElement/hideElement.html

CSS

方法1-display:none

正如上文说的一样，最简单也最粗暴的方法就是设置元素的display属性为none;

display:none;

设置为display:none;的元素将不会再占用页面空间，其占用的空间会被其他元素所占有，从而会引起浏览器的重排和重汇。

方法2-visibility: hidden

另外一种方法是设置元素的visibility属性为hidden。

visibility: hidden

这种做法虽然能够隐藏元素，但是该元素仍会占用页面空间，因此只会导致浏览器的重汇而不会引起重排。

如果希望元素隐藏后不会引起页面布局的变化，则推荐使用visibility:hidden;方式。

方法3-opacity:0

设置元素透明度opacity属性为0，也可以隐藏页面元素。

opacity:0

在呈现上与visibility:hidden;方式一样，同样会占据页面空间。

差异性-页面布局

对页面布局的影响主要是看是否会引起浏览器的重汇和重排，对应的差异如下图所示。

页面布局差异

差异性-事件绑定

  • display:none;的元素会直接从页面上消失，因此在该元素上绑定的事件不会生效。

  • visibility: hidden;的元素不会触发绑定的事件。

  • opacity:0; 的元素会触发绑定的事件，例如点击会触发click函数。

我们可以通过以下的例子来看看。

首先我们定义两个div，分别设置为visibility: hidden;和opacity:0，在两个div上分别绑定一个click事件。

定义div元素

绑定的事件

当我们在两个元素都进行点击时，可以在控制台看到如下输出结果。

结果

从上述结果可以看出和上述结论一致。

差异性-动画属性

  • display:none;的元素会直接从页面消失，因此定义transition效果完全无效。

  • visibility:hidden;的元素会在transition设置的时间内消失，但是没有动画效果。

  • opacity:0;的元素可以和正常元素一样，从页面以动画效果消失。

同样我们可以通过以下这个例子来看看。

首先，我们定义两个div，并设置其transition属性。

div元素

定义transition效果

我们通过将鼠标移至元素上，可以看到两者的差异，从而验证了上述结论的正确性。

结束语

本篇文章主要讲解了使用CSS隐藏元素的几种常用方法，并讲解了它们之间的区别，以便大家在特定的场景中进行选择。

相关推荐

Shiro学习系列教程三:集成web（web集成环境）

相关推荐：《Shiro学习系列教程一：Shiro之helloworld》《Shiro学习系列教程三：集成web》《Shiro学习系列教程四：集成web(二)》《Shiro学习系列教程五：自定义Real...

写了这么多年代码，这样的登录方式还是头一回见

SpringSecurity系列还没搞完，最近还在研究。有的时候我不禁想，如果从SpringSecurity诞生的第一天开始，我们就一直在追踪它，那么今天再去看它的源码一定很简单，因为我们了...

Shiro框架:认证和授权原理（shiro框架授权的四种方式）

优质文章，及时送达前言Shiro作为解决权限问题的常用框架，常用于解决认证、授权、加密、会话管理等场景。本文将对Shiro的认证和授权原理进行介绍：Shiro可以做什么？、Shiro是由什么组成的？举...

Spring Boot 整合 Shiro-登录认证和权限管理

这篇文章我们来学习如何使用SpringBoot集成ApacheShiro。安全应该是互联网公司的一道生命线，几乎任何的公司都会涉及到这方面的需求。在Java领域一般有SpringS...

Apache Shiro权限管理解析二Apache Shiro核心组件

ApacheShiro核心组件Subject（用户主体）Subject是Shiro中的核心概念之一，表示当前用户（可以是登录的用户或匿名用户）。它是与用户交互的主要接口，提供了对用户身份验证...

详细介绍一下Apache Shiro的实现原理?

ApacheShiro是一个强大、灵活的Java安全框架，设计目标是简化复杂的安全需求，提供灵活的API，使开发者能方便地将安全功能集成到任何应用中。主要作用是用于管理身份验证、授权、会话管理和加...

什么是Apache Shiro?SpringBoot中如何整合Apache Shiro?

ApacheShiro是一个功能强大且易于使用的Java安全框架，主要用于构建安全的企业应用程序，例如在应用中处理身份验证（Authentication）、授权（Authorization）、加密（...

Apache Shiro权限管理解析三Apache Shiro应用

Shiro的优势与适用场景优势简单易用：API设计直观，适合中小型项目快速实现权限管理。灵活性高：支持多种数据源（数据库、LDAP等），并允许开发者自定义Realm。跨平台支持：不仅限于We...

那些通用清除软件不曾注意的秘密（清理不需要的应用）

系统清理就像卫生检查前的大扫除，即使你使出吃奶的劲儿把一切可能的地方都打扫过，还会留下边边角角的遗漏。随着大家电脑安全意识的提高，越来越多的朋友开始关注自己的电脑安全，也知道安装360系列软件来"武装...

JWT在跨域认证中的奇妙应用（jq解决跨域）

JWT在跨域认证中的奇妙应用什么是JWT？让我们先来聊聊JWT（JSONWebToken）。它是一种轻量级的认证机制，就像一张电子车票，能让用户在不同的站点间通行无阻。JWT由三部分组成：头部（H...

开启无痕浏览模式真能保护个人隐私吗?

在访问网站页面时，你是否有过这样的疑虑，自己访问的会不会是山寨网站？用公用电脑上网，个人信息会被别人看到吗？这时，有人会说，使用浏览器的“无痕浏览”模式不就行了，可以在操作中不留下“蛛丝马迹”，但，真...

辅助上网为啥会被抛弃 曲奇(Cookie)虽甜但有毒

近期有个小新闻，大概很多小伙伴都没有注意到，那就是谷歌Chrome浏览器要弃用Cookie了！说到Cookie功能，很多小伙伴大概觉得不怎么熟悉，有可能还不如前一段时间被弃用的Flash“出名”，但它...

cookie、session和token（cookie,session和token的区别）

Cookie的概念最早是在1994年由NetscapeCommunications的程序员LouMontulli发明的，目的是为了解决当时早期互联网的一个关键问题：HTTP无状态协...

小白都能看懂的session与cookie的区别理解

cookie/session都是跟踪识别浏览器用户身份的一个东西。cookie的理解：我们要知道，服务器和客户端之间进行数据传输，需要使用到一个超文本传输协议（http协议），而http协议本身是个...

面试:网易一面:支撑10万QPS的电商购物车系统如何架构设计呢?

1.需求分析：10万QPS的购物车系统需要满足哪些需求？回答：10万QPS的购物车系统需要满足以下核心需求和挑战：核心功能：添加、删除、修改购物车商品实时查看购物车列表支持高并发读写（10万QPS）...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表