分类
商品
商品
店铺
资讯
分类
商品
商品
店铺
资讯

CSS隐藏的秘密

  • 时间:2018-06-21 23:17 作者:小郑搞码事 来源:小郑搞码事 阅读:448
  • 扫一扫,手机访问
摘要:一个div元素隐藏的本质是什么?这篇就说这个问题一、隐藏一个元素有哪几种方法呢?这个问题好答复,只需是做前台的同学都或者多或者少可以答复,下面列出几个可以立马想到的方法。1、常见display:none将元素设置为display:none后,元素在页面上将彻底消失,元素原本占有的空间就会被其余元素占

一个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去思考,这就是一种玩代码的乐趣。也可以学到东西。

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

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部