三种隐藏HTML元素的方式

在网页应用中，显示/隐藏某个元素或组件是一件经常要做的事情，尤其是在目前比较流行的单页应用中。一共有 3 种方式来实现

1. CSS 的 display: none;
2. CSS 的 visibility: hidden;
3. HTML5 的 hidden 属性（boolean）

他们都能使添加了这个属性的元素及其子元素『不被看见』。这篇文章着重来比较一下它们之间的差异。

display:none

添加了这个属性的元素：不占据页面空间（不影响布局），因为这个属性不是让这个元素『不可见』，而是压根没有把它渲染出来，但是依旧可以通过 DOM API 来获取到，对它进行操作。

visible:hidden

添加了这个属性的元素：仍占据页面位置（影响布局），仅仅让元素变透明，不画出来罢了。也同样可以通过DOM API 获取到。

HTML5 hidden

添加了这个属性的元素：不占据页面空间（不影响布局），未被渲染出来。当这个元素和当前页面状态不相关时。这个元素仅仅用来被页面中的其它元素重复使用，提供某种信息，而非直接展示给用户使用时

总之，当此元素不应该被用户获取到时使用。（因此，不能把此元素链接给某个 href 上）