---恢复内容开始---
在页面上，将一个元素隐藏起来，常用的方法有三种，代码为opacity: 0;display: none;visibility: hidden;这三种代码都可以将一个元素从视觉上“剔除”掉。但这三种代码方式之间是否有着不同点？这就是我今天将要讨论的问题（虽然没人和我讨论）。
首先，我们先创建一个实验对象元素，就以使用最广泛的元素div为列子。
创建好ID为“testBody”的div后，为它添上样式便于观察。
之后在实验元素上绑定一个点击事件，这点击事件执行时会出现一个弹窗。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .testBody { width: 100px; height: 100px; background: #faa; margin-bottom: 20px; } </style> </head> <body> <div class="testBody"> </div> <div class="testBody" id="testBody"> </div> <div class="testBody"> </div> <script> document.getElementById(‘testBody‘).onclick = function(){ alert() } </script> </body> </html>
现在，在元素上添加内嵌样式,先绑定的是代码为opacity。
<div class="testBody" id="testBody" style="opacity: 0;"> </div>
这时候的实验元素在原位置上点击时仍能执行绑定的点击事件审查元素发现，实验元素仍然在原位置，只是我们看不见了。
然后，将内嵌样式换成visibility进行试验发现，虽然在原位置上我们仍能看见实验元素的位置，但点击时并没有弹窗出现，即绑定在上面的方法没有执行。
最后，将内嵌样式换成display进行试验发现，元素完全不见了，就像最开始的时候就没有这个元素一样，但审查元素仍然看见元素在原位置。
这三种不同的常用元素隐藏方式，可适用于各种不同的需求。
---恢复内容结束---
原文：http://www.cnblogs.com/1weisuodepangzi/p/4893121.html