JavaScript 隐藏和显示 Div 元素：简单实现与代码示例

<div id='myDiv'>这是一个div</div>
<button id='hideBtn'>隐藏</button>
<button id='showBtn'>显示</button>
<script>
var myDiv = document.getElementById('myDiv');
var hideBtn = document.getElementById('hideBtn');
var showBtn = document.getElementById('showBtn');

hideBtn.onclick = function() {
  myDiv.style.display = 'none';
}

showBtn.onclick = function() {
  myDiv.style.display = 'block';
}
</script>
<h2>使用 JavaScript 隐藏和显示 Div 元素</h2>
<p>本示例展示了如何使用 JavaScript 代码控制 Div 元素的隐藏和显示，通过按钮点击事件来切换 Div 的可见性。</p>
<h3>代码示例</h3>
<p><strong>HTML 代码：</strong></p>
<pre><code class="language-html">&lt;div id='myDiv'&gt;这是一个div&lt;/div&gt;
&lt;button id='hideBtn'&gt;隐藏&lt;/button&gt;
&lt;button id='showBtn'&gt;显示&lt;/button&gt;
</code></pre>
<p><strong>JavaScript 代码：</strong></p>
<pre><code class="language-javascript">var myDiv = document.getElementById('myDiv');
var hideBtn = document.getElementById('hideBtn');
var showBtn = document.getElementById('showBtn');

hideBtn.onclick = function() {
  myDiv.style.display = 'none';
}

showBtn.onclick = function() {
  myDiv.style.display = 'block';
}
</code></pre>
<h3>解释</h3>
<ol>
<li><strong>获取元素：</strong> 使用 <code>document.getElementById()</code> 方法获取页面中 <code>id</code> 为 <code>myDiv</code>、<code>hideBtn</code> 和 <code>showBtn</code> 的元素。</li>
<li><strong>绑定事件：</strong>  分别给隐藏按钮和显示按钮绑定 <code>onclick</code> 事件，当按钮被点击时，会执行对应的函数。</li>
<li><strong>控制显示：</strong> 在函数中，通过 <code>myDiv.style.display</code> 属性来控制 <code>div</code> 元素的显示方式。
<ul>
<li>将 <code>myDiv.style.display</code> 设置为 <code>'none'</code> 可以隐藏 <code>div</code> 元素。</li>
<li>将 <code>myDiv.style.display</code> 设置为 <code>'block'</code> 可以显示 <code>div</code> 元素。</li>
</ul>
</li>
</ol>
<h3>总结</h3>
<p>通过以上代码，您就可以轻松实现使用 JavaScript 控制 Div 元素的隐藏和显示功能。您可以根据需要修改代码，例如添加其他按钮、调整样式等。</p>