javascript (js)通过button按钮实现盒子的显示和隐藏
前奏：无论是实现div或其他内容的显示和隐藏，原理都差不多
效果图：
点击隐藏后隐藏盒子，同时隐藏按钮的值修改为显示。点击显示后盒子又将显示，显示按钮的值修改为隐藏，如图：
完整代码如下（代码详解）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*div盒子css样式——区分*/
div {
height: 150px; //高度150px
width: 150px; //宽度150px
background-color: yellow; //盒子颜色yellow
}
</style>
</head>
<body>
<input type="button" value="隐藏" id="btn">
<div id="dv"></div>
<script>
//通过button按钮的id获取点击事件
document.getElementById("btn").onclick = function () {
//使用if判断，判断button按钮的value属性
if (this.value === "隐藏") {
// 如果是隐藏，那么点击后通过div盒子的id修改css样式，将display属性值改为none
document.getElementById("dv").style.display = "none";
//this关键字获取的是当前对象 通过this关键字来修改button的value值
this.value = "显示";
} else if (this.value === "显示") {
// 如果是显示，那么点击后通过div盒子的id修改css样式，将display属性值改为block
document.getElementById("dv").style.display = "block";
//this关键字获取的是当前对象 通过this关键字来修改button的value值
this.value = "隐藏";
}
};
</script>
</body>
</html>
文字叙述不太严谨，请包容