<scripttypescripttype=”text/javascript”>
varw3c=(document.getElementById)?true:false;
varagt=navigator.userAgent.toLowerCase();
varie=((agt.indexOf(“msie”)!=-1)
&&(agt.indexOf(“opera”)==-1)&&(agt.indexOf(“omniweb”)==-1));
varie5=(w3c&&ie)?true:false;
varns6=(w3c&&(navigator.appName==”Netscape”))?true:false;
function$(o){
returndocument.getElementById(o)?document.getElementById(o):o;
}
functionGetXYWH(o){
varo=$(o);
varnLt=0;
varnTop=0;
varoffsetParent=o;
while(offsetParent!=null&&offsetParent!=document.body){
nLt+=offsetParent.offsetLeft;
nTop+=offsetParent.offsetTop;
if(!ns6){
parseInt(offsetParent.currentStyle.borderLeftWidth)>0?
nLt+=parseInt(offsetParent.currentStyle.borderLeftWidth):””;
parseInt(offsetParent.currentStyle.borderTopWidth)>0?
nTop+=parseInt(offsetParent.currentStyle.borderTopWidth):””;
}
offsetParentoffsetParent=offsetParent.offsetParent;
}
return{X:nLt,Y:nTop,W:o.offsetWidth,H:o.offsetHeight};
}
</script>
</body>
</html>
实际演练
首先，我们先拉出一个Table如下，
<table id=”table1″>
<tr>
<td>1
</td>
<td>2
</td>
</tr>
<tr>
<td>3
</td>
<td>4
</td>
</tr>
</table>
执行后看起来会像这样子 
首先我们替第二行的 tr 加上 style="visibility:hidden"
<tr style=”visibility:hidden”>
可以发现我们的Table会变成这样 
所以当使用 visibility:hidden 时，
物件是确实的被隐藏的，但物件的位置仍旧保持著不会消失
再来我们将第二行的tr改成 style="display:none"
<tr style=”display:none”>
我们的Table会变成 
可以看到第二行连空白也消失了，
所以当使用 style="display:none" 时，
物件连原本所在的位置都一起被隐藏了
总结：
若我们需要把一个物件完全的隐藏，
那我们应该要使用 display:none ，
它可以将物件连同所在位置一起隐藏，
就好像真的在网页上完全消失了，
而实际上JQuery的hide及show也是在透过操作display属性来实现的，
