<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js点击隐藏和展开div层效果</title>
</head>
<body>
<div id="box" style="background-color: pink; height:200px; width:200px;display:none"></div>
<input type="button" value="点击显示" id="btn" οnclick="btn()" style="position:absolute; left:320px; top:10px;">
<script type="text/javascript">
var btn1 = document.getElementById('btn');
var box1 = document.getElementById('box');
function btn() {
if (btn1.value == "点击隐藏") {
box1.style.display = 'none'; btn1.value = "点击显示";
} else {
box1.style.display = ''; btn1.value = "点击隐藏";
}
}
</script>
</body>
</html>
js点击隐藏和展开div层效果
最新推荐文章于 2022-11-07 22:46:29 发布