显示和隐藏盒子
2017-09-21 本文已影响0人
Yuann
显示和隐藏盒子.jpg
<style>
button{
margin:10px ;
}
div{
width:200px;
height:200px;
background-color:pink;
}
.show{
display:block;
}
.hide{
display:none;
}
</style>
<body>
<button id = "btn">隐藏</button>
<div>临千仞之溪，非才长也，位高也！
</div>
<script>
//需求：点击button，隐藏盒子
//步骤：
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动成俗
//1获取事件源和相关元素
var btn = document.getElementById("btn");
var div = document.getElementByTagName("div")[0];
//2.绑定事件
btn.onclick = function(){
//3.书写事件驱动程序
//判断btn的innerHTML属性值，如果为隐藏就隐藏盒子，并修改按钮内容为显示。
//反之，则显示，并修改按钮内容为隐藏
if(this.innerHTML==="隐藏”）{
div.className = "hide";
//修改文字（innnerHTML）
btn.innerHTML = "显示”；
}
else{
div.className = "show";
btn.innerHTML = "隐藏";
}
}
</script>
</body>
