前端实现“隐藏的方式”的区别有哪些
这篇文章将为大家详细讲解有关前端实现“隐藏的方式”的区别有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联公司,是成都地区的互联网解决方案提供商,用心服务为企业提供网站建设、app软件开发、小程序开发、系统定制网站开发和微信代运营服务。经过数十年的沉淀与积累,沉淀的是技术和服务,让客户少走弯路,踏实做事,诚实做人,用情服务,致力做一个负责任、受尊敬的企业。对客户负责,就是对自己负责,对企业负责。
隐藏方式
隐藏一个元素可以通过以下方式:
1.HTML元素加上:hidden="hidden"。
2.属性设置为 display :none,或把 visibility :hidden。但是请注意,这两种方法会产生不同的结果
3.JS中隐藏element.hide(); 显示element.show()
4.v-if/v-show;(Vue中的)wx:if/wx:show(微信小程序里的)
隐藏方式的解释
hidden="hidden"
隐藏要占用域的空间。
写在html内部的
首页
首页
删除hidden="hidden"这条语句就可实现显示
CSS里面的display会覆盖html中的hidden属性
display :none
display 隐藏不占用域的空间。
隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
display 有多种显示方式
display:block //块级显示
display:inline//行级显示
不删除节点
虽然在页面中消失了,但是通过js获取节点的方式,还是会获取到;仅仅只是在文档流(及页面中)隐藏消失而已。
visibility :hidden
visibility 隐藏要占用域的空间。
隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
就像把透明度设置为0,虽然你看不见,但是你知道它就在那。
visibility 的显示只有一个 visibility:visible;
不删除节点
hide() show()
写在JS中的
hide()
element.hide()实际上是设置了CSS中的display为none
show()
element.show()实际上是设置了CSS中的display为block
效果和display一样。
v-if/wx:if、v-show/wx:show
隐藏不占用域的空间
隐藏true,显示false
v-ifwx:if
隐藏会删除元素节点,显示又会添加回来
隐藏即在整个Dom结构和页面中都找不到,相当于将这个元素节点完全删除掉。
总结
方式 | 位置区别 | 文档流区别 | 其他区别 |
---|---|---|---|
hidden="hidden" | 写在HTML标签属性中, | 占用域的空间 | 隐藏不会删除节点 会被CSS里面的display覆盖 |
visibility :hidden; | 写在CSS | 占用域的空间 | 隐藏不会删除节点 |
display :none; | 写在CSS | 不占用域的空间 | 隐藏不会删除节点 |
hide() ; show(); | 写在JS | 不占用域的空间 | 隐藏不会删除节点,相当于修改display属性 |
v-if/wx:if ; | 写在HTML标签属性中, | 不占用域的空间 | 隐藏会删除节点,有更高的切换消耗 |
v-show/wx:show; | 写在HTML标签属性中, | 不占用域的空间 | 隐藏不会删除节点,相当于修改display属性 |
关于“前端实现“隐藏的方式”的区别有哪些”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
名称栏目:前端实现“隐藏的方式”的区别有哪些
标题URL:http://scyanting.com/article/jcespj.html