CSS隐藏的秘密

作者 : 开心源码 本文共1118个字,预计阅读时间需要3分钟 发布时间: 2022-05-11 共60人阅读

一个div元素隐藏的本质是什么?这篇就说这个问题

CSS隐藏的秘密

一、隐藏一个元素有哪几种方法呢?

这个问题好答复,只需是做前台的同学都或者多或者少可以答复,下面列出几个可以立马想到的方法。

1、常见display:none

将元素设置为display:none后,元素在页面上将彻底消失,元素原本占有的空间就会被其余元素占有,也就是将元素设置display:none后,就会导致浏览器的重绘和重排。

2、能设置visibility:hidden

下面举一个简单的例子

上下分别有两个div,代码是这样的:

CSS隐藏的秘密

当上面一个div.toptext设置display:none时,页面展现出来的效果是这样的:

CSS隐藏的秘密

结论是下面那个div.text已经往上移了。

当上面一个div.toptext设置visibility:hidden时,页面展现出来的效果是这样的:

CSS隐藏的秘密

结论是下面那个div.text并没有上移。

所以使用visibility:hidden来设置元素隐藏时,元素本身还是占位的,也就是说这种方法适使用于那些元素隐藏后不希望页面布局发生变化的场景。

3、opacity:0

当div元素设置opacity:0时,同样元素看不到,但是还是点位的,效果和visibility:hidden一样。

4、设置属性为0

这个方法算是技巧吧,将div元素的少量属性设置值为0,当这个div元素有子元素时,加上overflow:hidden,下面这样:

CSS隐藏的秘密

二、隐藏之后可以点击吗?

上面我们通过各种方式能将一个元素隐藏,这里我们在来证明一下隐藏的实质,给他们绑定一个点击事件。

CSS隐藏的秘密

像上面这样子,然而通过结果,我们发现在只有opacity:0时的div能触发点击事件,起因也很简单,设置元素透明度为0后,元素只是相对于人眼不存在而已,对浏览器来说,它还是存在的,所以能触发点击事件。

display:none无法点击能了解,由于元素已经消失了,而visibility:hidden元素无法点击就说明元素也是消失的,只是仍然占据着页面空间。最后是height:0元素,假如有子元素设置overflow:hidden也无法点击,元素相当于消失了。

结论真的是这样吗?当我给div.none加一行自动触发点击事件时:像下面这样

$(“.none”).click()

结果发现控制台输出

// none clicked

所以前面无法触发点击事件的真正起因是鼠标无法真正接触到被设置成隐藏的元素(指的是大小)。

三、写到最后的总结:

隐藏一个div元素也许很简单,但是知道一个元素隐藏的本质切需要我们花点time去思考,这就是一种玩代码的乐趣。也可以学到东西。

小郑子每天给你推知识,讲完理论后期还有各种前台项目实战,假如这些对您有益,敬请关注。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » CSS隐藏的秘密

发表回复