你知道的前端隐藏元素的方法都有哪些？

最近在面试的时候，四场面试，问了我三次这个问题，你知道的隐藏元素的方法都有哪些？我之前没有准备过类似的问题，我脑子里面只有一个v-if/v-show那里的display:none，虽然面试官也给予了肯定，但是明显不是很满意，一直问我是否知道其它的方法

在我们日常开发中，如果不是使用原生开发的话，很少遇到需要手写隐藏元素的情况，所以就带大家复习一下这块知识吧，把我能想到的方法都说一下，欢迎补充。

display:none

在vue中有一个经典问题就是v-if和v-show的区别，这里面就涉及到display:none的使用，v-if是是直接增删DOM来达到显示和隐藏的效果，而v-show是通过设置css的display属性为none来达到显示和隐藏的效果。

既然vue都使用这种方法了，那么这应该是比较好用的一种方法。

可能有些人不知道这个visibility 属性，它可以显示和隐藏元素而不更改文档的布局。该元素还可以隐藏<table>中的行或列。

它的取值有：

visible
元素正常显示。

hidden
隐藏元素，但是其它元素的布局不改变，相当于此元素变为透明。要注意若将其子元素设为visibility:visible，则该子元素依然可见。

collapse

用于<table>行、列、列组和行组，隐藏表格的行或列，并且不占用任何空间(与将display:none用于表格的行/列上的效果相当)。但是，仍会计算其他行和列的大小，就好像折叠的行或列中的单元格一样。此值允许从表中快速删除行或列，而不强制重新计算整个表的宽度和高度。
折叠的弹性项目被隐藏，他们将占用的空间被删除。
对于XUL元素，元素的计算大小始终为零，而且通常会忽略影响大小的其他样式，尽管边距仍然有效。
对于其他元素，折叠处理与隐藏相同

visibility : hidden就可以实现我们的效果。

opacity是CSS3中新增的设置透明度的属性，既然是透明度，那我设置为0，不就和隐藏是一个效果了吗~~

transform也是CSS3中新增的属性，它的scale方法是用来设置元素增加或减少的大小的。和opacity是一样的道理，我把它设置为0，不就达到隐藏的效果了吗~~

z-index属性可以设置元素之间的层级，把它设置成为负数，然后再把自己设置为绝对定位就可以达到隐藏的效果。

position : absolute;
z-index : -9999;

overflow属性定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。它是overflow-x和overflow-y的简写属性。

它的值有:

visible
默认值。内容不会被修剪，可以呈现在元素框之外。
hidden
如果需要，内容将被裁剪以适应填充框。不提供滚动条。
scroll
如果需要，内容将被剪裁以适应填充框。浏览器显示滚动条，无论是否实际剪切了任何内容。(这可以防止滚动条在内容更改时出现或消失。) 打印机仍可能打印溢出的内容。
auto
取决于用户代理。如果内容适合填充框内部，则它看起来与可见内容相同，但仍会建立新的块格式化上下文。如果内容溢出，桌面浏览器会提供滚动条。

经过我们了解之后，单纯的设置overflow:hidden肯定是不行的。可以把它的宽高都设置为0，再设置overflow即可。

  width: 0;
  height: 0;
  overflow: hidden;

可能有同学会问，我把宽高都设置为0，可不可以达到隐藏的效果呢？
当然不可以，除非你的元素中没有任何的内容，只要有内容就无法隐藏，内容会变成一条竖线延展下来。

我能想到的隐藏元素的方式大概就有这些，单纯知道这些还不太够，虽然它们都能达到隐藏的效果，但是会有区别。区别主要在于是否会占位。

占位的意思就是，虽然这个元素在视图上隐藏消失了，但是本质上它还存在，所以会占据它原本的位置。

经过实际测试：

以上就是我能想到的所有关于前端隐藏元素的方法了，包括占位不占位的问题，我都是经过实际测试发出来的，这些内容足够应付所有相关的面试了，有不对的地方欢迎交流指正。

QQ:505417246
微信:18331092918
微信公众号:Code程序人生
个人博客:http://rayblog.ltd

在这里插入图片描述