javascript动态设置div显示和隐藏代码下载

当前位置：首页 > 代码实例 > html5 css3代码分类 > 其他 > javascript动态设置div显示和隐藏代码下载

有时候需要根据代码的运行状态或者需要动态设置div元素的显示或者隐藏，当然不仅仅是div元素，这里仅以div元素为例子。设置div的原始或者隐藏可以使用display和visibility，下面就通过代码实例对此进行一下演示。

代码实例如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<style type="text/css">
#top,#bottom{
  width:150px;
  height:150px;
  background-color:blue;
  margin-bottom:10px;
}
#topdiv,#bottomdiv{
  width:50px;
  height:50px;
  background-color:red;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var topbt=document.getElementById("topbt");
  var topdiv=document.getElementById("topdiv");
    
  var bottombt=document.getElementById("bottombt");
  var bottomdiv=document.getElementById("bottomdiv");
    
  topbt.onclick=function(){topdiv.style.display="none";}
  bottombt.onclick=function(){bottomdiv.style.visibility="hidden";}
}
</script> 
</head> 
<body > 
<div id="top">
  <div id="topdiv"></div>
  <input type="button" value="点击隐藏" id="topbt">  
</div>
<div id="bottom">
  <div id="bottomdiv"></div>
  <input type="button" value="点击隐藏" id="bottombt">    
</div>
</body> 
</html>

代码描述：javascript动态设置div 显示和隐藏。javascript动态设置div显示和隐藏代码下载

下载全部收藏

152 203

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册