顯示和隱藏盒子.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.獲取事件源和相關(guān)元素
//2.綁定事件
//3.書寫事件驅(qū)動成俗
//1獲取事件源和相關(guān)元素
var btn = document.getElementById("btn");
var div = document.getElementByTagName("div")[0];
//2.綁定事件
btn.onclick = function(){
//3.書寫事件驅(qū)動程序
//判斷btn的innerHTML屬性值津肛，如果為隱藏就隱藏盒子舔糖，并修改按鈕內(nèi)容為顯示展辞。
//反之媳叨，則顯示，并修改按鈕內(nèi)容為隱藏
if(this.innerHTML==="隱藏”）{
div.className = "hide";
//修改文字（innnerHTML）
btn.innerHTML = "顯示”崔涂；
}
else{
div.className = "show";
btn.innerHTML = "隱藏";
}
}
</script>
</body>
