CSS将页面元素隐藏的10种方法小结

在Web开发中，隐藏页面元素使其视觉不可见是一个非常常见的需求。为了实现这一目标，我们通常会采用多种方法，最常用的例如CSS的display属性，只要设置为node即可隐藏元素。

本文将通过对当前所有可用的隐藏元素的方法做一个总结，大概有10种方法可以使用，一一做下介绍。

所有方法的总结在文章的最后，可以跳过前文。

display:none

display 属性用于设置页面元素的显示方式，能够控制元素的显示或者隐藏，当它的值被设置为 none 时，就会隐藏对应的元素，使其不可见。
这种方法是最常用的隐藏元素的方法，可以让元素在网页中完全消失，不会占据页面上的任何空间，用户无法看到或进行交互。
但是，这样也会导致元素脱离文档流，可能会影响其他元素的布局。

<div class="elem">
  这是一个要隐藏的元素。
</div>

.elem {
  display: none;
}

visibility:hidden

visibility 属性是专门用于控制元素的显示和隐藏，当它的值设置为 hidden 后，也会将元素隐藏。
但与 display 不同的地方在于，此时元素仍会占据页面上的空间，只是在视觉上不可见，显示为空白区域(所占区域为元素的大小)。
这种方式也是无法进行元素的响应事件监听和交互状态，通常应用于需要隐藏但仍需要占据空间的元素，如占位符、提示信息等。

.elem {
  visibility: hidden;
}

opacity: 0

opacity 属性用于控制元素的透明度，取值范围：0 - 1，0 表示完全透明，1 表示不透明。
当我们将元素的 opacity 属性设置为 0 时，该元素将会变为不可见状态，不过它仍会占据页面上的空间。

.elem {
  opacity: 0;
}

这种方式隐藏的元素，都是视觉上不可见，和 visibility:hidden 比较类似。
但不同的地方在于：opacity: 0 设置元素不可见以后，用户仍然能够与该元素进行交互，而 visibility:hidden 则不行。

.elem {
  opacity: 0;
}
.elem:hover {
  opacity: 0.5;
}

<div class="elem" onclick="alert(1)">
  这是一个要隐藏的元素。
</div>

如上代码所示，div.elem 元素设置 opacity: 0 不可见以后，onclick 鼠标点击事件会响应，hover 状态也会执行。

position

position 属性用于控制元素的定位方式，可以将元素在页面的不同位置进行定位，有多个取值，也是css中非常重要的属性，但我们这里只讨论如何隐藏元素。
当 position 取值相对定位或者绝对定位时，给定(left/top/right/bottom)四个方向上的任意一个较大的值(或负值)，都能将元素设置到屏幕之外，达到不可见的状态。

在使用上，相对定位和绝对定位有一定的区别。
绝对定位的元素会脱离当前文档流，整个从视觉上完全消失，效果上与 display:none 相似。

.elem {
  position: absolute;
  left: -9999px;
}

而相对定位则只是将元素移出，在当前位置仍然会占据一定的空间，效果上与 visibility:hidden 较相似。

.elem {
  position: relative;
  top: -9999px;
}

但使用的定位的方式使元素不可见，都无法再与元素进行交互操作。

在绝对定位时，还可以通过 z-index 属性将元素的层级调低，让它被其他元素遮挡，达到一定的隐藏效果。

clip-path

clip-path 属性，允许用不同的剪切方式创建元素的可显示区域，区域内的内容可以展示，区域外的内容则隐藏。之前也有博文详细介绍该属性，clip-path详解。
根据它的特点，如果将元素的所有内容都设置到显示区域外，则元素就自动隐藏了，达到不可见的状态，而要实现这点只需要剪切区域设置为0，有多个形状值可以实现：

.elem {
  clip-path: circle(0%);
  clip-path: inset(50%);
  clip-path: polygon(0 0);
}

这种方式隐藏的元素，虽然不可见，但仍然会占据自身大小的空间，效果上与 visibility:hidden 相似。并且也不能响应事件监听和各种交互状态。

filter:blur

filter 属性是CSS3开始提供的，用于对页面元素设置各种滤镜效果，有大概十多个各种不同的滤镜值可以设置，我们这里使用 blur 模糊效果来达到隐藏页面元素的效果。

只需要将 blur() 值设置为一个较大的值，元素将模糊到无法显示的地方，如值大于400：

.elem {
  filter: blur(500px);
}

通过以上代码，就能将元素进行隐藏了，他的效果与使用 opacity: 0 一样，元素虽不可见，但仍占据空间，并且能够响应事件和交互状态。

注意：filter:opacity(0) 透明滤镜与 opacity: 0 也一样。

HTML Element 的 hidden 属性

通过设置页面元素(Element)的 hidden 属性，也能够将元素进行隐藏，它达到的效果与 display:none 几乎一样，元素脱离文档流、不可见，不占用空间，无法响应事件和用户交互等。

<div hidden>这个元素将被隐藏，不占用空间，无法交互。</div>

以上方式，针对的页面元素，是不区分块状元素和行内元素，都能够达到隐藏效果，下面还有几种方式，可能针对特定的元素才起作用。

width: 0

这个方式代表一类隐藏元素的方法，即通过设置元素的宽高属性为 0，达到隐藏元素的效果。
注意，行内元素无法设置宽高属性，所以这种方法一般处理块状元素。

.elem {
  width: 0;
  height: 0;
}

以上代码，就能将块状元素进行隐藏，不占据空间，并且这种方式隐藏的块状元素也无法响应事件和交互状态。

但如果块状元素内包含文字，则文字内容仍然会显示，并且呈竖状：

因此，这类方法平时很少会使用。
那如果想把文本内容也隐藏，有没有办法呢？那就要用到下面的属性了。

font-size: 0

font-size 用于设置文字的大小，当我们把它的值设置为 0 时，文本内容就不可见。

.elem {
  font-size: 0;
}

如果是行内元素，或者块状元素内只包含文字，则单独使用 font-size: 0 都可以隐藏。
但我们可以结合宽高和文字大小属性一起使用，就能达到完整的隐藏效果，而不分块状元素还是行内元素，都能起作用：

.elem {
  width: 0;
  font-size: 0;
}

这种方式，行内元素将占据空间，而块状元素则不占，都无法进行交互。

transform:scale(0)

transform 属性用于对元素进行变换，例如旋转、缩放、平移等。其中，缩放 scale 就可以用来隐藏元素使用，只需要将 scale 的值设置为 0，该元素就会被缩放到不可见的状态，达到隐藏效果：

.elem {
  transform: scale(0);
}

需要注意的是，transform:scale(0) 达成的隐藏效果，无法作用于行内元素，这是由于 transform 属性本身对行内元素不起作用。
并且，这种隐藏方式也会占用页面空间(元素的原始大小区域)，但元素实际上宽高都为0，同样无法响应事件和交互。

其他

以上多数都是通过设置 css 属性达成的页面元素隐藏效果，但在前端开发中，很多时候，我们需要使用 JavaScript 来控制页面元素，包括隐藏也是一样的。
如，我们使用 JavaScript 代码来控制元素的 sdiplay 属性，以便可以隐藏或显示元素：

const element = document.getElementById('elementId')
element.style.display = element.style.display === 'none' ? 'block' : 'none'

以上代码，就是获取到元素对象，通过设置 style 样式对象的 display 属性，控制了它的隐藏和显示。

除此以外，我们还可以使用 JavaScript 对象将页面元素删除，如果要显示还可以再添加回来，通过这种方式也能达成影响和显示的效果：

const element = document.getElementById('elementId')
document.body.removeChild(element)
setTimeout(() => {
  document.body.appendChild(element)
}, 3000)

总结

以上就是关于Web页面隐藏元素的10种方法(除去了JavaScript的方法)，每种方法都有自身的特点，我们在实际开发过程中，需要根具体的需求和场景来选择最合适的方法。
下面，是针对这些方法的一个总结：

到此这篇关于CSS将页面元素隐藏的10种方法小结的文章就介绍到这了,更多相关CSS元素隐藏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！