JavaScript 控制元素案例点击按钮显示隐藏 div

点击按钮时显示或隐藏一个div元素：

HTML代码：

<button id="toggleButton">点击切换显示</button>
<div id="content" style="display: none;">
  这是要显示或隐藏的内容。
</div>

JavaScript代码：

const toggleButton = document.getElementById('toggleButton');
const content = document.getElementById('content');

toggleButton.addEventListener('click', () => {
  if (content.style.display === 'none') {
    content.style.display = 'block';
  } else {
    content.style.display = 'none';
  }
});

这段代码首先通过getElementById方法获取按钮和内容的元素，并将其分别保存在toggleButton和content变量中。然后，使用addEventListener方法为按钮绑定一个点击事件的监听器。

在监听器函数中，通过检查内容元素的display样式属性，如果其值为none，则将其设置为block以显示元素；如果不是none，则将其设置为none以隐藏元素。这样，每次点击按钮时，就会切换内容元素的显示和隐藏状态。