display:none和visibility:hidden的区别

最新推荐文章于 2025-08-28 11:34:12 发布
最新推荐文章于 2025-08-28 11:34:12 发布
阅读量50 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/crazy-yyl/p/6875502.html
本文介绍了JavaScript中两种不同的隐藏元素的方法：display:none 和 visibility:hidden。前者使元素完全消失，后者则仅使元素不可见但保留其占据的空间。文章通过实验对比了两者的不同效果。

在js中，display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能，但两者有所区别

经过亲自实验，我发现使用 visibility:hidden属性会使对象不可见，但该对象在网页所占的空间没有改变（看不见但摸得到），等于留出了一块空白区域

而 display:none属性会使这个对象彻底消失（看不见也摸不到）

转载于:https://www.cnblogs.com/crazy-yyl/p/6875502.html

display:none和visibility:hidden的区别是 ？
csdn_Levy的博客
09-25 363
用户依然可以通过 Tab 键导航到这个按钮，并使用 Enter 键来触发点击事件。的元素不会响应任何事件，例如鼠标点击事件。的元素依然可以响应事件，例如，即使一个按钮被设置为。会影响到元素的所有子元素，如果一个元素被设置为。，那么它的所有子元素也都会被隐藏，无论子元素的。属性，也就是说，如果一个元素被设置为。，它的子元素依然可以通过设置。更像是“删除”元素，而。更像是“隐藏”元素。
css元素隐藏原理及display:none和visibility:hidden
09-22
在介绍了这么多隐藏元素的方法之后，我们要特别注意display:none和visibility:hidden两种属性的主要区别。这两者之间的差异主要表现在以下几个方面： 1. 空间占据：display:none;隐藏的元素不占据任何布局空间，而...
【前端】display:none和visibility:hidden两者的区别
努力才是唯一的入场券。
06-05 8209
【前端】display:none和visibility:hidden两者的区别
display：none和visibility：hidden的区别
2301_81192892的博客
03-09 370
如果只是想让元素不可见，但仍要保留其在页面中的位置，并且可能需要使用过渡效果或希望屏幕阅读器能够读取其内容等情况，通常使用。在实际应用中，如果需要完全隐藏元素且不希望它占据空间，也不需要过渡效果等，可以使用。
display:none和visibility:hidden区别
m0_47013706的博客
04-06 455
display:none和visibility：hidden区别
display: none和visibility: hidden的区别
ppoo240218的博客
11-20 1606
布局：元素从页面中完全移除，不占据任何空间。：元素不可见，但仍然占据空间。页面重绘和重排：由于元素被完全移除，页面会触发回流和重绘，完全移除元素。。：页面只会触发重绘（repaint），不会触发重排。动画和过渡：在使用 CSS 过渡和动画时，不太容易实现，因为元素被完全移除。：可以配合 CSS 过渡和动画实现隐藏和显示效果，因为元素仍然存在。
css display：none和visibility：hidden的区别
郑老狗要推动人类发展
04-01 307
css display：none和visibility：hidden的区别
CSS隐藏元素：display:none vs visibility:hidden
HTTP404_CN的博客
07-16 570
display: none和visibility: hidden是CSS中隐藏元素的两种方式，但存在本质区别。display: none会完全移除元素，不占布局空间，触发重排且不支持动画；而visibility: hidden保留元素空间，仅触发重绘，支持动画效果且子元素可单独显示。前者适用于需要彻底移除元素的场景，后者适合需要保留布局或实现动画的情况。
面试题之：display: none 和 visibility: hidden 的区别
xiaoxin_040112的博客
08-28 580
CSS中display:none和visibility:hidden都能隐藏元素，但存在关键区别：1) display:none不占空间且完全移除元素，会触发重排；visibility:hidden保留空间仅隐藏内容，仅触发重绘；2) display:none的元素不可交互，子元素也无法显示；visibility:hidden的元素仍可响应JS事件，子元素可单独显示；3) 性能上前者开销更大，后者更优；4) 前者适合彻底隐藏元素（如弹窗），后者适合保留占位的场景（如加载动画）。无障碍访问方面，两者都不推荐用
【CSS 面经】display:none 与 visibility:hidden 的区别
lph159的博客
12-10 1235
特性元素是否从页面流中移除是，元素完全移除，页面布局重新计算否，元素仍然占据原来的位置元素是否响应用户交互否，元素完全消失，无法响应任何交互否，元素不可见，但仍然可以响应交互（如点击事件）对布局的影响会改变页面布局，后续元素会填充空白不会改变布局，元素仍然占据空间性能影响因为重新计算了布局，性能影响较大性能影响较小，只是隐藏元素应用场景适用于完全移除元素，且不希望它对页面布局产生任何影响适用于隐藏元素，但保留其占用的空间，如悬浮菜单是否占用空间不占用任何空间仍然占用空间。
display:none和visibility:hidden的差别比较与演示代码
01-19
前言： 在使用css隐藏栏位或物件的时候， 常常会使用到display:none和visibility:hidden这两个属性， 但却很容易分不清楚这两个的差别， 或是乾脆同时使用两种属性，来确保物件一定被隐藏， 其实我们可以很简单的来...
根据虹软实现的 人脸检测、追踪、识别、年龄检测、性别检测 的JAVA解决方案
09-11
打开下面链接，直接免费下载资源： https://renmaiwang.cn/s/vxfyv (最新版、最全版本)根据虹软实现的 人脸检测、追踪、识别、年龄检测、性别检测 的JAVA解决方案
matlab YALMIP、GLPK安装资源
09-11
matlab的YALMIP、GLPK安装包，内置YALMIP、GLPK，直接将分别其添加到matlab的toolbox、路径中即可（matlab主页-设置路径-添加并包含子文件夹-YALMIP；matlab主页-设置路径-添加文件夹-github_repo）
【scratch3.0少儿编程-游戏原型-动画-项目源码】打砖块.zip
09-11
资源说明： 1：本资料仅用作交流学习参考，请切勿用于商业用途。 2：一套精品实用scratch3.0少儿编程游戏、动画源码资源，无论是入门练手还是项目复用都超实用，省去重复开发时间，让开发少走弯路！ 更多精品资源请访问 https://blog.youkuaiyun.com/ashyyyy/article/details/146464041
使用 OpenCV 技术实现人脸检测的方法与过程
09-11
打开下面链接，直接免费下载资源： https://renmaiwang.cn/s/o7o7f 运用 OpenCV 这一计算机视觉库来开展人脸检测相关的操作
随你记微信小程序_专为学生群体设计的便捷收支管理工具_提供快速记录日常开销与收入的功能_支持多维度数据可视化分析_帮助用户清晰掌握个人财务状况_培养理性消费习惯_无需下载安装即用即.zip
最新发布
09-11
随你记微信小程序_专为学生群体设计的便捷收支管理工具_提供快速记录日常开销与收入的功能_支持多维度数据可视化分析_帮助用户清晰掌握个人财务状况_培养理性消费习惯_无需下载安装即用即.zip
一个基于PyQt5的实时人脸识别系统，使用MTCNN进行人脸检测和FaceNet进行人脸特征提取，支持人脸注册、识别和管理功能
09-11
打开下面链接，直接免费下载资源： https://renmaiwang.cn/s/2u8a8 (最新版、最全版本)一个基于PyQt5的实时人脸识别系统，使用MTCNN进行人脸检测和FaceNet进行人脸特征提取，支持人脸注册、识别和管理功能。
display:none 和 visibility:hidden
07-17
display:none和visibility:hidden的区别在于： display:none会将元素完全隐藏，不占据任何空间，即使在HTML代码中也不会显示出来；而visibility:hidden则是将元素隐藏，但仍然占据空间，即在HTML代码中仍然存在，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值