切换 - 隐藏和显示

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;
}