【前端帮帮忙】第9期 你可能不知道的CSS隐藏页面元素的方法

隐藏元素的方法有不少，使用的时候仍是要根据实际项目的需求来选择最合适的。今天咱们一块儿来学习一下这方面相关的知识点。

1. opacity

.hide-opacity {
  opacity: 0;
}
复制代码

经过下面的gif图，咱们能够总结opacity隐藏元素有几个特色：

• 只是视觉上的隐藏，隐藏元素的依然占据着空间，影响其余元素的布局
• 依然可以响应用户的交互
• 经过DOM依然能够获取该元素，能够响应DOM事件
• 其子孙元素即便从新设置了opacity: 1也没法显示
• 元素和它全部的内容会被读屏软件阅读（没有测试过）

2. visibility

.hide-visibility {
  visibility: hidden;
}
复制代码

经过下面的gif动图，一样咱们能够总结出visibility隐藏元素的特色：

• 隐藏元素的依然占据着空间，影响其余元素的布局
• 不会响应任何用户交互
• 经过DOM依然能够获取该元素，没法响应DOM事件
• 其子孙元素能够经过从新设置visibility: visible来显示
• 元素在读屏软件中也会被隐藏（没有测试过）

3. display

是真正意义上的隐藏元素。

.hide-display {
  display: none;
}
复制代码

经过下面的gif动图，咱们能够总结出display: none隐藏元素的特色：

• 真正意义上的隐藏，元素不会占据任何空间
• 用户没法与其进行直接的交互
• 经过DOM依然能够获取到该元素
• 其子孙元素即便从新设置display: block也没法显示
• 读屏软件没法读到该元素的内容（没有测试过）
• transition动画会失效

4. hidden

HTML5新增的hidden属性，能够直接隐藏元素。

<div hidden>
  我是被隐藏的元素
</div>
复制代码

特色：

跟display表现一致。

5. position

.hide-position {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
复制代码

特色：

• 视觉上的隐藏，实际显示在屏幕的可视区以外，不会占据空间，不影响其余元素的布局
• 用户没法与其进行直接的交互
• 元素的内容能够被读屏软件读取（没有测试过）
• 经过DOM依然能够获取到该元素
• 其子孙元素没法经过从新设置对应的属性来显示

6. clip-path

经过裁剪元素来实现隐藏。

.hide-clip {
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}
复制代码

特色：

• 视觉上的隐藏，隐藏元素的依然占据着空间，影响其余元素的布局
• 用户没法与其进行直接的交互
• 元素的内容能够被读屏软件读取（没有测试过）
• 经过DOM依然能够获取到该元素
• 其子孙元素没法经过从新设置对应的属性来显示

7. overflow

经过设置元素的宽高为0来隐藏元素。

.hide-overflow {
  width: 0;
  height: 0;
  overflow: hidden;
}
复制代码

必须加上overflow: hidden，不然其子孙元素依然能够显示，下面的动图能够说明：

特色：

• 视觉上的隐藏，隐藏元素的不会占据任何空间，不会影响其余元素的布局
• 用户没法与其进行直接的交互
• 元素的内容能够被读屏软件读取（没有测试过）
• 经过DOM依然能够获取到该元素
• 其子孙元素没法经过从新设置对应的属性来显示

8. transform

.hide-transform {
  transform: translate(-9999px, -9999px);
}
复制代码

或者

.hide-transform {
  transform: scale(0);
}
复制代码

特色：

• 视觉上的隐藏，隐藏元素的依然占据着空间，影响其余元素的布局
• 用户没法与其进行直接的交互
• 元素的内容能够被读屏软件读取（没有测试过）
• 经过DOM依然能够获取到该元素
• 其子孙元素没法经过从新设置对应的属性来显示

其余

若是是纯文本的隐藏，能够设置

.hide-text {
  text-indent: -9999px;
}
复制代码

或者

.hide-text {
  font-size: 0;
}
复制代码

还有一个是无障碍设计规范里面的：

<div aria-hidden="true"></div>
复制代码

差别性

上面简单的罗列了8中隐藏元素的方式，其实给咱们视觉上的效果，这些方法均可以让元素不可见（也就是咱们所说的隐藏）。然而，屏幕并非惟一的输出机制，好比说屏幕上看不见的元素（隐藏的元素），其中一些依然可以被读屏软件阅读出来（由于读屏软件依赖于可访问性树来阐述）。为了消除它们之间的歧义，咱们将其归为三大类：

• 彻底隐藏
• 视觉上的隐藏
• 语义上的隐藏

三种类型的隐藏总结下来以下表所示：

可见性状态	屏幕上	可访问性树（读屏软件等）
彻底隐藏	隐藏	隐藏
视觉上的隐藏	隐藏	可见
语义上的隐藏	可见	隐藏

彻底隐藏

针对上面所列的8种方法，可以实现彻底隐藏的只有下面这3种：

• display: none
• visibility: hidden
• HTML5新增的hidden属性

视觉上的隐藏

• opacity
• position
• transform
• clip-path
• overflow

语义上的隐藏

• aria-hidden="true"

其余区别

隐藏方式	占据原来的空间	直接跟用户交互	直接响应DOM事件
opacity	是	是	是
visibility	是	否	否
display	否	否	否
hidden	否	否	否
position	否	否	否
clip-path	是	否	否
overflow	否	否	否
transform	是	否	否

最后

感谢您的阅读，但愿对你有所帮助。因为本人水平有限，若是文中有不当的地方烦请指正，感激涕零。

关注

欢迎你们关注个人公众号前端帮帮忙，一块儿交流学习，共同进步。

参考：

【译】用 CSS 隐藏页面元素的 5 种方法