按钮隐藏显示div

按钮隐藏显示div的实现方法可以使用JavaScript来完成。通过给按钮添加点击事件，当点击按钮时，通过修改div的样式属性来实现隐藏和显示。

在HTML中添加一个按钮和一个div，按钮用于触发隐藏和显示的操作，div用于被隐藏和显示。给按钮添加一个id属性，用于在JavaScript中获取该按钮的引用，给div添加一个id属性，用于在JavaScript中获取该div的引用。

示例代码如下：

<button id="toggleButton">点击隐藏/显示</button>
<div id="myDiv">这是一个要隐藏和显示的div</div>

接下来，在JavaScript中获取按钮和div的引用，并给按钮添加点击事件。

示例代码如下：

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

在点击事件的回调函数中，使用if语句判断div的display样式属性，如果为"none"，则将其设置为"block"，即显示div；如果不为"none"，则将其设置为"none"，即隐藏div。

还可以通过修改div的visibility属性来实现隐藏和显示。当visibility属性为"hidden"时，div被隐藏；当visibility属性为"visible"时，div被显示。

示例代码如下：

var toggleButton = document.getElementById("toggleButton");
var myDiv = document.getElementById("myDiv");
toggleButton.addEventListener("click", function() {
  if (myDiv.style.visibility === "hidden") {
    myDiv.style.visibility = "visible";
  } else {
    myDiv.style.visibility = "hidden";
  }
});

需要注意的是，使用display属性隐藏和显示div时，隐藏后的div不会占用页面布局空间；而使用visibility属性隐藏和显示div时，隐藏后的div仍然会占用页面布局空间。

以上是使用JavaScript实现按钮隐藏显示div的方法。除了使用JavaScript，还可以使用CSS来实现隐藏和显示效果，通过添加和移除CSS类来改变div的显示状态。