将div设置为none会删除其他元素

时间:2016-11-20 12:15:18

标签: javascript jquery html css

当我运行这段代码时;

document.getElementById("loading").style.display = "none"

它还会删除名为" myDiv"

的div

当我将MyDiv设置为阻止时,文本显示,但是当我将加载设置为无时,它也会删除MyDiv,我希望它只是隐藏显示div。

<head>
<style>
 .loading {
     position: absolute;
     left: 50%;
     top: 50%;
     margin: -60px 0 0 -60px;
     background: #fff;
     width: 100px;
     height: 100px;
     border-radius: 100%;
     border: 10px solid #19bee1;
 }
 .loading:after {
     content: '';
     background: trasparent;
     width: 140%;
     height: 140%;
     position: absolute;
     border-radius: 100%;
     top: -20%;
     left: -20%;
     opacity: 0.7;
     box-shadow: rgba(0, 163, 204, 0.6) -4px -5px 3px -3px;
     animation: rotate 2s infinite linear;
 }
 @keyframes rotate {
     0% {
         transform: rotateZ(0deg);
     }
     100% {
         transform: rotateZ(360deg);
     }
 }
    </style>
</head>

<div class="loading" id="loading"</div>

<body onload="myFunction()">

<div class="myDiv" id="myDiv" style="display:none;" >
  <h2>Tada!</h2>
  <p>Some text in my newly loaded page..</p>
</div>

<script>
var myVar;
var toooa
function myFunction() {
    myVar = setTimeout(showPage, 3000);
}

function showPage() {

  document.getElementById("myDiv").style.display = "block"
  document.getElementById("loading").style.display = "none"
}
</script>

</body>
</html>

http://codepen.io/anon/pen/QGdYdw?editors=1000#0

1 个答案:

答案 0 :(得分:1)

你的代码出错,我甚至感到惊讶:

<div class="loading" id="loading"</div>

应该是:

<div class="loading" id="loading"></div>