实现“隐藏的方式”的区别

曦在开发的过程里经常用到的隐藏，用户的的需求里也经常会要求我们显示和不显示;但是前端里实现隐藏的方式那么多我们该选择哪一个呢?回答当然是......都要!小孩纸才做选择。哈哈，咱如此甚好，“整”。

隐藏方式

隐藏一个元素可以通过以下方式：

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"

display ：none

隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

display：block //块级显示

display：inline//行级显示

虽然在页面中消失了，但是通过js获取节点的方式，还是会获取到;仅仅只是在文档流(及页面中)隐藏消失而已。

visibility ：hidden

visibility 隐藏要占用域的空间。

隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

就像把透明度设置为0，虽然你看不见，但是你知道它就在那。

hide() show()

element.hide()实际上是设置了CSS中的display为none

element.show()实际上是设置了CSS中的display为block

v-if/wx:if、v-show/wx:show

• 隐藏要占用域的空间
• 除hidden="hidden"这条语句就可实现显示
• CSS里面的display会覆盖html中的hidden属性
  • display 隐藏不占用域的空间。
  • display 有多种显示方式
  • 不删除节点
  • visibility 的显示只有一个 visibility：visible;
  • 不删除节点
  • 写在JS中的
  • hide()
  • show()
  • 效果和display一样。
  • 隐藏不占用域的空间
  • 隐藏true，显示false小沉曦自己的学习心得!若有不正，还望斧正。其实在实际开发过程中根据需要选择技术才是最好的捷径哦，因为你永远不知道用户在想什么，嘻嘻 希望渴望正义的你们不要吝啬对我的建议哟。回见!
  • 

（编辑：济南站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!