Question

我已经尝试过以下代码来隐藏/显示div元素。现在我想在页面加载时隐藏元素。只有在单击按钮时才会显示div元素。

<style type="text/css">
#sectiontohide {
padding:20px;
background:#f0f0f0;
width:400px;
}
</style>
<script type="text/javascript">
function toggle_div(id) {

   var divelement = document.getElementById(id);

   if(divelement.style.display == 'none')
      divelement.style.display = 'block';
   else
      divelement.style.display = 'none';
  }
</script>
</head>
<body>
<h3>JavaScript to show/hide a Div</h3>

<button onClick="toggle_div('sectiontohide');">Click here</button> to toggle  visibility of div element #sectiontohide
<br /><br />

<div id="sectiontohide">This is the div to hide with id = sectiontohide</div>

Answer 1

只需将css设置为隐藏

即可

<style type="text/css">
#sectiontohide {
  padding:20px;
  background:#f0f0f0;
  width:400px;
  display:none;
}
</style>

Answer 2

看到你使用内联样式，为什么不把它设置为开始？

<div id="sectiontohide" style="display: none;">This is the div to hide with id = sectiontohide</div>

Answer 3

使div成为可见的隐藏选项。

<div id="sectiontohide" style='display:none'>This is the div to hide with id = sectiontohide</div>

Answer 4

您可以在脚本块上尝试此代码

window.onload = function () {
    toggle_div("sectiontohide");
};

仅在单击按钮时显示div元素

4 个答案: