用JavaScript来控制对象的显示与隐藏

明天就放春节假了，今天整理资料时，发现几个有用的JS问题，所以觉得还是写下来为好，学习重在积累啊！

以往做的WEB程序，偏向于后台操作，几乎没有使用到JavaScript什么的。但综合考虑到程序的运行效率等，现在正尝试着学习并使用JS。

控制对象的显示或隐藏，有两种方法：使用对象的display属性或visibilty属性。然而，这两者还是有区别的：

display：选择'none'值后，将不再占位置，相邻控件占据它原来的位置，可以理解为消失，是一种比较彻底的隐藏；如果想要恢复显示，可将display属性改为'block'。
visibilty：选择'hidden'后，虽然页面不在显示，但仍然占有原来位置，相邻控件位置不改变；如果想要恢复显示，可将visibilty属性改为''。

<mce:script language="javascript" type="text/javascript"><!-- function showInput(){ var obDis=document.getElementById("testDis"); var obVis=document.getElementById("testVis"); if(obDis.style.display=='block') { obDis.style.display='none'; obVis.style.visibility='hidden'; } else { obDis.style.display='block'; obVis.style.visibility=''; } } // --></mce:script>

 

有时候，我们并不想要一些控件在页面第一次加载时就显示出来，而是在页面加载完成后，再通过其它控件的操作来激活它显示。这个时候，我们就可以在初始化时，设定需要隐藏的控件样式，再用JS作如上操作就可以了。我开始用的方法是在后台C#中添加控件的changed事件，来更改显示隐藏属性，但每次都刷新页面，多次操作下来，实在让人感觉有点晕，效率也不高。

总结一下：像上面这样的简单操作，还是尽量用JS与CSS去控制；对于复杂的数据库操作或逻辑操作等，则采用后台C#来操作比较方便高效。