JavaScript点击切换div的显示和隐藏
JavaScript点击切换div的显示和隐藏属于前端实例代码，有关更多实例代码大家可以查看。
有些网页功能具有点击同一个可以实现同一个元素的显示和隐藏效果。
比如，如果需要填写，点击就可以展开，然后再点击就可以隐藏，非常的人性化。
下面通过实例介绍一下如何实现此效果。
代码实例如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>点击显示和隐藏效果</title>
<style type="text/css">
#thediv{
background-color:green;
height:200px;
width:200px;
display:none;
}
</style>
<script type="text/JavaScript">
function toggle(){
if(thediv.style.display=="block"){
thediv.style.display="none";
this.value="显示";
}
else{
thediv.style.display="block";
this.value="隐藏";
}
}
window.onload=function(){
var bt=document.getElementById("bt");
var thediv=document.getElementById("thediv");
bt.onclick=toggle;
}
</script>
</head>
<body>
<div style="width:200px;margin:0px auto">
<input type="button" id="bt" value="显示"/>
<div id="thediv"></div>
</div>
</body>
</html>
以上代码实现我们想要的功能，当点击按钮的时候可以实现div的隐藏域显示，实现过程如下:
一.实现原理:
当点击按钮的时候，首先判断div是否处于处于隐藏，如果隐藏则显示，如果显示则隐藏，关于按钮的显示文字也是根据状态跟随调整，一切就这么简单。
二.代码注释:
（1）.function toggle(){},声明一个函数用来处理切换功能。
（2）.if(thediv.style.display=="block"){}，判断div是否是显示的。
（3）.thediv.style.display="none"，将div设置为隐藏。
（4）.this.value="显示"，将按钮的value属性值设置为显示，关于this的用法可以参阅JavaScript的this用法详解。
（5）.window.onload=function(){}，文档完全加载完成之后，再去执行函数中的代码。
（6）.var bt=document.getElementById("bt")，获取按钮对象。
（7）.var thediv=document.getElementById("thediv")，获取div对象。
（8）.bt.onclick=toggle，注册click事件处理函数，关于事件绑定参阅JavaScript注册事件处理函数。
JavaScript点击切换div的显示和隐藏，这样的场景在实际项目中还是用的比较多的，关于JavaScript点击切换div的显示和隐藏就介绍到这了。