js 怎么用一个按钮控制DIV来回显示和隐藏

如题所述

举报该文章

相关建议 2019-05-07

1、打开Hbuilder编辑器，新建一个html空白文档，输入基本的结构，然后按下Crtl+S保存一下：

2、创建一个button按钮，给按钮设置一个id，名字设置为“myBT”，创建一个用来显示隐藏的div，将其id设置为“main”：

3、给div和button设置一些样式，为了美观好看，这里无需设置display，因为默认就是显示的：

4、编写js脚本，这里用到Jquery，给button添加一个点击事件，然后获取div的dom，判断dom中的display属性值，如果是“none”，就显示div，否则则隐藏:

5、全部完成后，按下crtl+s保存，来到编辑器的右侧，观察显示效果，此时div是显示的：

6、点击hide按钮，会发现div消失了，反复点击按钮会重复显示隐藏的效果，以上就是用JS控制div显示隐藏的案例：

温馨提示：内容为网友见解，仅供参考

当前网址：https://66.aolonic.com/aa/si29sdvv9upxnni99s.html

其他看法

第1个回答 2018-03-04

试编写示例代码如下：

<html>
<head>
  <meta charset="utf-8"/>
  <title>显示/隐藏DIV</title>
  <script>
    function doHide(){
          var oDiv = document.getElementById("divTest");
          var oButton = document.getElementById("btnTest")
          if (oDiv.style.display == "none"){
            oDiv.style.display = "block";
            oButton.value = "隐藏DIV"
          }else {
            oDiv.style.display = "none";
            oButton.value = "显示DIV"
          }
        }
  </script>
</head>
<body>
<div id="divTest">
  this is a div
</div>
<input id="btnTest" type="button" value="隐藏DIV" onclick="doHide();"/>
</body>
</html>

运行截图：

初始：

点击：

再次点击：

第2个回答 2016-03-04

//简单来说就是通过设置按钮的onclick事件来控制div的显示和隐藏。
//比如在CSS中先将div的display设置为"none",那么点击的时候就先查询display值是否为"none"，
//如果为"none"的话，就改为"block"，即显示div；如果不是"block"就改为"none"，隐藏div。
var oButton = document.getElementById("button");//假设HTML中按钮id="button"，并取得。
var oDiv = document.getElementById("div");//假设HTML中div的id="div"，并取得。
oButton.onclick=function(){
if (oDiv.style.display == "none"){
oDiv.style.display = "block";
}else {
oDiv.style.display = "none";
}
}
//还有就是用三元操作符更简洁一些。
望采纳。本回答被提问者采纳

第3个回答 2018-03-04

当div具有hidden属性或display为none时，div会隐藏。例如，要隐藏的div的id为d把下面这个方法绑定到按钮上。
function()｛
if (document.getElementById('d').style.display=='none') {
document.getElementById('d').style.display = '';
} else {
document.getElementById('d').style.display = 'none';
}｝

第4个回答 2019-02-18

代码如下

<!DOCTYPE html>
<html>
<head>
    <title>显示/隐藏<title>
    <meta charset="utf-8">
  </head>
  <body>
        <button onclick="btn()">显示/隐藏</button>
        <div id="main">需要隐藏的内容</div>
        <script>
            function btn(){
                var main=document.getElementById('main');
                if(main.style.display=='none'){
                    main.style.display='block'
                 }else{
                     main.style.display='none'
                  }
            }
          </script>
       </body>
       </html>

1 2 下一页

相似回答

大家正在搜