如何隐藏DOM元素

在CSS中，要隐藏DOM元素常见的方法有：

• 设置元素的opacity值为0
• 设置元素的visibility值为hidden
• 设置元素的display值为none
• 设置元素的position值为absolute，并且将其移到不可见区域
• 设置元素clip（在新的CSS中使用clip-path来替代clip）

除此之外，还可以使用：

• 设置元素的hidden

上面隐藏元素的方法都是大家常见的，也是众所周之的。当然除此之外还有一些特殊的小技巧,比如说：

• 将元素的font-size、line-height、width和height设置为0
• 设置元素的transform的translateX或者translateY的值为-100%

当然，或许在你的实战经验当中，你还有别的方案。对于其他的方案，我们不再罗列，咱们具体来看看各种隐藏DOM元素的差异。

隐藏DOM元素的差异性

上面简单的罗列了八种隐藏DOM元素的方式，其实给我们视觉上的效果，这些方法都可以让元素不可见(也就是我们所说的隐藏)。然而，屏幕并不是唯一的输出机制，比如说，屏幕上看不见的元素(隐藏的元素)，但其中一些隐藏元素的方式在屏幕阅读器中并没有隐藏，它依然能被屏幕阅读器读出来（因为屏幕阅读器依赖于可访问性树来阐述）。为了消除它们之间的歧意，我们将使用以下条款：

• 完全隐藏：元素既不在屏幕上可见，而且也不暴露在可访问性树上
• 语义上隐藏：元素在屏幕上呈现，但不暴露在可访问性树上
• 视觉上隐藏：元素没有在屏幕上呈现，但是暴露在可访问性树上

如何完全隐藏元素

针对上面所列的隐藏元素方式当中，能完全隐藏元素的方法有三种：

• 通过CSS设置元素的display属性值为none
• 通过CSS设置元素的visibility属性值为hidden
• 通过HTML5元素的属性值hidden（就是给元素声明一个hidden属性值），比如<div hidden>

虽然上面的几种方法得到的结果相同，即内容在屏幕上不可见，屏幕阅读器也无法读到(不在可访问性树上),但它们之间还是有所差别的。

给DOM元素设置display:none;来隐藏元素，将导致元素完全消失，而且不会占据任何的空间。如果通过visibility:hidden;隐藏元素，元素虽然消失了，但会占据空间(其占据的空间和元素的大小有直接关系)。