Question

我已将我的关闭按钮放在div中，但它不起作用？我应该保持显示：none;但是当我删除显示时它可以工作！

 function myFun() {
    var button  = document.getElementById("myBtn");
    button.onclick = function() {
    var div = document.getElementById('title');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
    }



};
  </script>
</head>

<body>
  <div id="title" style=" display:none; font-family: Helvetica, Arial, sans-serif; margin-left:auto; margin-right:auto; position:absolute; top: 50px; right: 16px; padding: 30px; z-index:10; width:290px; height:500px; box-sizing: border-box;  background-color:#fcfcfc ; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); text-align:center; float:center;"><input type="button" id="myBtn" onclick="myFun()" value="close" style= "bottom: 2px; right: 60px; margin: 1px 200px;"></div>

Answer 1

您应该删除visibility:hidden 因此，您将得到您想要的内容，因为div将显示为没有visibility:hidden的按钮。

Answer 2

其工作的优秀兄弟。您只需要删除 ~~visibility：hidden~~

function myFun() {
    var x = document.getElementById("myBtn").value;
    document.getElementById("title").innerHTML = x;
    alert(x);
}

#title{
    background-color: #fcfcfc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    font-family: Helvetica,Arial,sans-serif;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
    padding: 30px;
    position: absolute;
    right: 16px;
    text-align: center;
    top: 50px;
    width: 290px;
    z-index: 10;
}

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <div id="title">
 <input type="button" id="myBtn" onclick="myFun()" value="close"></div>
 </body>

关闭按钮不起作用

2 个答案: