JavaScript点击一个按钮隐藏和显示div

按钮控制元素显隐

最新推荐文章于 2022-04-13 15:03:10 发布

翻译最新推荐文章于 2022-04-13 15:03:10 发布 · 3.1w 阅读

前端js 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了一种使用纯 JavaScript 实现按钮控制 HTML 元素显示与隐藏的方法。通过简单的代码示例展示了如何根据按钮的点击状态切换 div 的可见性。

本章节通过代码实例介绍一下如何实现点击同一按钮实现一个元素的显示和隐藏效果。

此效果还是比较实用的，比如点击按钮可以实现一个功能模块的显示或者隐藏。

下面就通过代码实例介绍一下如何实现此功能。

代码实例如下:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击一个按钮隐藏和显示div</title>
<style type="text/css">
#thediv{
  width:200px;
  height:50px;
  background:#ccc;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var obt=document.getElementById("bt");
  var odiv=document.getElementById("thediv");
  obt.onclick=function(){
    if(odiv.style.display=="none"){
      odiv.style.display="block";
      obt.value="隐藏模块";
    }
    else{
      odiv.style.display="none";
      obt.value="显示模块";
    }
  }
}
</script>
<body>
<input type="button" id="bt" value="显示模块"/>
<div id="thediv" style="display:none"></div>
</body>
</html>