如何隐藏我的<div>拉起我的网站时默认元素？</div><div id="text_translate"><p> 所以我尝试将“myInfo.style.display = 'block'”更改为 document.getElementById('demo').style.display = 'none' 但它没有用，所以我很难弄清楚如何隐藏默认情况下，当我单击按钮时，它会显示它。</p><p> 这是代码</p><pre> &lt;center&gt;&lt;p&gt;&lt;button onclick="myFunction()" id="button"&gt;Show More&lt;/button&gt;&lt;/center&gt;&lt;/p&gt;&lt;br&gt; &lt;script&gt; function myFunction() { var myInfo = document.getElementById('demo'); var displaySetting = myInfo.style.display; var clockButton = document.getElementById('button'); if (displaySetting == 'block') { myInfo.style.display = 'none'; clockButton.innerHTML = 'Show Info'; } else { myInfo.style.display = 'block'; clockButton.innerHTML = 'Hide Info'; } } &lt;/script&gt; &lt;div id="demo"&gt;&lt;font color="black"&gt;&lt;b&gt;Fav Color:&lt;/b&gt; Orange/Purple&lt;br&gt;&lt;b&gt;Hobbies:&lt;/b&gt; Coding, Video games, Hanging out with friends, Drifting&lt;br&gt;&lt;b&gt;Fav Song:&lt;/b&gt; Homocide - Logic (ft. Eminem)&lt;br&gt;&lt;b&gt;Fav Animal:&lt;/b&gt; Cat&lt;br&gt;&lt;b&gt;Fav Food:&lt;/b&gt; Pulled Pork Sandwich&lt;/font&gt;&lt;/div&gt;</pre></div>

Question

所以我尝试将“myInfo.style.display = 'block'”更改为 document.getElementById('demo').style.display = 'none' 但它没有用，所以我很难弄清楚如何隐藏默认情况下，当我单击按钮时，它会显示它。

这是代码

      <center><p><button onclick="myFunction()" id="button">Show More</button></center></p><br>

<script>
  function myFunction() {
    var myInfo = document.getElementById('demo');

    var displaySetting = myInfo.style.display;

    var clockButton = document.getElementById('button');

    if (displaySetting == 'block') {
      myInfo.style.display = 'none';
      clockButton.innerHTML = 'Show Info';
    }
    else {
      myInfo.style.display = 'block';
      clockButton.innerHTML = 'Hide Info';
    }
  }
</script>
     <div id="demo"><font color="black"><b>Fav Color:</b> Orange/Purple<br><b>Hobbies:</b> Coding, Video games, Hanging out with friends, Drifting<br><b>Fav Song:</b> Homocide - Logic (ft. Eminem)<br><b>Fav Animal:</b> Cat<br><b>Fav Food:</b> Pulled Pork Sandwich</font></div>

Answer 1

正如萨姆纳埃文斯在他们的评论中所说，只需添加

style="display: none" 

到您的 div 标签。 默认情况下它将被隐藏，您的按钮将起作用。 你可以在这里测试它： https://jsfiddle.net/0v3fzo97/