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

我心飞翔 分类:javascript

前端实现隐藏的方式的区别

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

隐藏方式

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

  1. HTML元素加上:hidden="hidden";
  2. css属性设置为 display :none,或把 visibility :hidden;
  3. JS中隐藏element.element.hide(); 显示element.element.show();
  4. Vue中的v-if/v-show;
  5. 微信小程序里的wx:if/wx:show;

隐藏方式的解释

hidden="hidden"
  • 写在HTML元素上

  • 隐藏要占用域的空间,即不删除文档流节点,相当于把透明度改为0。

    写在html内部的

    <h1 hidden="hidden"><span>首页</span></h1>
     
  • 删除hidden="hidden"这条语句就可实现显示

  • CSS里面的display会覆盖html中的hidden属性

display :none
  • 写在CSS样式中

  • 隐藏不占用域的空间,即删除文档流节点。

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

  • 隐藏会删除文档节点,不删除dom节点。

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

  • display 有多种显示方式

    display:block //块级显示

    display:inline//行级显示

visibility :hidden
  • 写在CSS样式中

  • 隐藏要占用域的空间。

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

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

  • 隐藏不会删除dom节点

  • visibility 的显示只有一个 visibility:visible;即可

hide() show()
  • 写在JS中的
  • 隐藏 hide()

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

  • 显示 show()

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

  • 隐藏/显示相当于修改display的属性值。
v-if/wx:if
  • 隐藏不占用域的空间
  • 表达式为布尔值为true就隐藏,false就显示
    <div   v-if="{{true}}">    v-if</div>
    <view  wx:if="{{false}}">  wx:if</view>
     
  • 隐藏会删除dom节点,显示又会添加回来

    隐藏即在整个Dom结构和页面中都找不到,相当于将这个元素节点完全删除掉。

v-show/wx:show
  • 隐藏不占用域的空间
  • 表达式为布尔值为true就隐藏,false就显示
  • 隐藏不会删除dom节点,相当于修改display属性值

总结

方式 位置区别 文档流区别 其他区别
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属性

最后一句

这是小沉曦自己的学习心得!若有不正,还望斧正。其实在实际开发过程中根据需要选择技术才是最好的捷径哦,因为你永远不知道用户在想什么,嘻嘻 希望渴望正义的你们不要吝啬对我的建议哟。回见!

image.png

回复

我来回复
  • 暂无回复内容