js点击按钮div显示隐藏

<input type="button" value="隐藏" id="btn"><div id="box"></div>#box {width: 200px;height: 200px;background-color: red;}.show {display: block;}.hidden {display: none;}// 获取元素var btn = d

每一天，每一步

7920人浏览 · 2021-06-12 09:42:03

每一天，每一步 · 2021-06-12 09:42:03 发布

<input type="button" value="隐藏" id="btn">
<div id="box"></div>

#box {
	width: 200px;
	height: 200px;
	background-color: red;
}
.show {
	display: block;
}
.hidden {
	display: none;
}

// 获取元素
var btn = document.getElementById('btn');
var box = document.getElementById('box');
var isShow = true; // 默认div显示
// 给按钮注册事件
btn.onclick = function () {
	if (isShow) {
		box.className = 'hidden'; // 控制div的显示，改变class属性值 class在js中是关键字，不可以作为变量或者属性的名字 用className代替
		// btn.value = '显示';
		this.value = '显示';
		isShow = false;
	} else {
		box.className = 'show';
		// btn.value = '隐藏';
		this.value = '隐藏';
		isShow = true;
	}
}

在这里插入图片描述
完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .show {
            display: block;
        }
        .hidden {
            display: none;
        }

    </style>
</head>
<body>
    <input type="button" value="隐藏" id="btn">
    <div id="box"></div>

    <script>
        // 获取元素
        var btn = document.getElementById('btn');
        var box = document.getElementById('box');
        var isShow = true; // 默认div显示
        // 给按钮注册事件
        btn.onclick = function () {
            if (isShow) {
                box.className = 'hidden'; // 控制div的显示，改变class属性值 class在js中是关键字，不可以作为变量或者属性的名字 用className代替
                // btn.value = '显示';
                this.value = '显示';
                isShow = false;
            } else {
                box.className = 'show';
                // btn.value = '隐藏';
                this.value = '隐藏';
                isShow = true;
            }
        }
    </script>

</body>
</html>