效果展示：
显示和隐藏盒子
源码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 标签 -->
<button>隐藏</button>
<div style="width:200px;height:200px;background:blue;"></div>
<!-- JS样式 -->
<script>
var btn= document.querySelector("button");
var div= document.querySelector("div");
btn.onclick=function(){
if(btn.innerHTML==="隐藏"){
this.innerHTML="显示";
div.style.display="none";
}else{
this.innerHTML="隐藏";
div.style.display="block";
}
}
</script>
</body>
</html>
网友评论