按钮控制div的显示和隐藏

按钮控制div的显示和隐藏可以通过JavaScript来实现。我们需要为按钮添加一个点击事件，当按钮被点击时，我们可以通过修改div的样式来实现显示和隐藏。

示例代码如下：

HTML部分：

<button id="btn">点击按钮</button>
<div id="myDiv">这是一个div</div>

JavaScript部分：

var btn = document.getElementById("btn");
var myDiv = document.getElementById("myDiv");
btn.addEventListener("click", function() {
  if (myDiv.style.display === "none") {
    myDiv.style.display = "block";
  } else {
    myDiv.style.display = "none";
  }
});

在上面的示例代码中，我们首先通过`document.getElementById`方法获取到按钮和div的元素。然后，使用`addEventListener`方法为按钮添加了一个点击事件，当按钮被点击时，执行回调函数。

在回调函数中，我们使用了`style.display`属性来获取或设置元素的显示方式。元素的`style.display`属性可以取三个值之一："none"、"block"或"inline"。当元素的`style.display`属性值为"none"时，表示元素是隐藏的；当属性值为"block"或"inline"时，表示元素是显示的。

在回调函数中，我们使用了一个条件语句来判断div的当前显示状态。如果div是隐藏的（即`myDiv.style.display`的值为"none"），则将其显示出来（将`myDiv.style.display`的值设置为"block"）；如果div是显示的（即`myDiv.style.display`的值为"block"或"inline"），则将其隐藏起来（将`myDiv.style.display`的值设置为"none"）。

除了使用`style.display`属性来控制元素的显示和隐藏，还可以使用其他一些CSS属性来实现类似的效果。例如，可以使用`style.visibility`属性来控制元素的可见性，或者使用`classList`属性来添加或删除元素的类名，从而改变元素的样式。

总结一下，通过JavaScript可以实现按钮控制div的显示和隐藏。我们可以通过修改元素的样式属性来实现这一效果，常用的属性有`style.display`、`style.visibility`和`classList`等。这些属性可以根据元素的当前状态来进行切换，从而实现动态的显示和隐藏效果。