前言

一说起隐藏HTML页面上的元素，很多人第一反应就是设置元素的css属性display:none;值，这是一种最常见的隐藏页面元素方法。本篇文章我们就一起看看使用CSS隐藏页面元素的方法，以及它们的区别。

本篇文章中的例子直接放到github地址中，感兴趣的同学可以自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/hideElement/hideElement.html

CSS

方法1-display:none

正如上文说的一样，最简单也最粗暴的方法就是设置元素的display属性为none;

display:none;

设置为display:none;的元素将不会再占用页面空间，其占用的空间会被其他元素所占有，从而会引起浏览器的重排和重汇。

方法2-visibility: hidden

另外一种方法是设置元素的visibility属性为hidden。

visibility: hidden

这种做法虽然能够隐藏元素，但是该元素仍会占用页面空间，因此只会导致浏览器的重汇而不会引起重排。

如果希望元素隐藏后不会引起页面布局的变化，则推荐使用visibility:hidden;方式。

方法3-opacity:0

设置元素透明度opacity属性为0，也可以隐藏页面元素。

opacity:0

在呈现上与visibility:hidden;方式一样，同样会占据页面空间。

差异性-页面布局

对页面布局的影响主要是看是否会引起浏览器的重汇和重排，对应的差异如下图所示。

页面布局差异

差异性-事件绑定

• display:none;的元素会直接从页面上消失，因此在该元素上绑定的事件不会生效。

• visibility: hidden;的元素不会触发绑定的事件。

• opacity:0; 的元素会触发绑定的事件，例如点击会触发click函数。

我们可以通过以下的例子来看看。

首先我们定义两个div，分别设置为visibility: hidden;和opacity:0，在两个div上分别绑定一个click事件。

定义div元素

绑定的事件

当我们在两个元素都进行点击时，可以在控制台看到如下输出结果。

结果

从上述结果可以看出和上述结论一致。

差异性-动画属性

• display:none;的元素会直接从页面消失，因此定义transition效果完全无效。

• visibility:hidden;的元素会在transition设置的时间内消失，但是没有动画效果。

• opacity:0;的元素可以和正常元素一样，从页面以动画效果消失。

同样我们可以通过以下这个例子来看看。

首先，我们定义两个div，并设置其transition属性。

div元素

定义transition效果

我们通过将鼠标移至元素上，可以看到两者的差异，从而验证了上述结论的正确性。

结束语

本篇文章主要讲解了使用CSS隐藏元素的几种常用方法，并讲解了它们之间的区别，以便大家在特定的场景中进行选择。