时间戳

首页 > 解决方案 > 如何隐藏我的

拉起我的网站时默认元素？

html - 如何隐藏我的
拉起我的网站时默认元素？

问题描述

所以我尝试将“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>

标签： html

解决方案

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

style="display: none"

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

推荐阅读