javascript - 切换 - 隐藏和显示

Question

我复制了 w3schools 的隐藏和显示切换，但我希望将其反转，这样额外的信息从一开始就不存在，但按钮会显示它。

这是代码:

html:

<button onclick="myFunction()">Click Me</button>

<div id="myDIV">
     This is my DIV element.
</div>

js:

function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
    x.style.display = 'block';
} else {
    x.style.display = 'none';
   }
}

如有任何帮助，我们将不胜感激!

Answer 1

解决方案很简单:隐藏 div。

<div id="myDIV" style="display:none"> 
    This is my DIV element. 
</div>

---

如果你将它隐藏在 css 中会更酷:

<div id="myDIV"> 
    This is my DIV element.
</div>

这在你的 CSS 中:

#myDIV {
    display: none;
}