摘要：<!DOCTYPE html /><html><head> <meta charset="utf-8" /> <title>用按鈕控制div的高度、寬度、顏色、重置、隱藏、顯示</title> <style> #box{
<!DOCTYPE html />
<html>
<head>
<meta charset="utf-8" />
<title>用按鈕控制div的高度、寬度、顏色、重置、隱藏、顯示</title>
<style>
#box{
width:100px;
height:100px;
background:#ccc;
margin:20px;
}
</style>
</head>
<body>
<div id="box"></div>
<input type="button" value="變高" onclick="hei_()" />
<input type="button" value="變寬" onclick="wid_()" />
<input type="button" value="變色" onclick="col_()" />
<input type="button" value="重置" onclick="cho_()" />
<input type="button" value="隱藏" onclick="dis_1()" />
<input type="button" value="顯示" onclick="dis_2()" />
<script type="text/javascript">
//改變高度
function hei_(){
document.getElementById("box").style.height="200px";
}
//改變寬度
function wid_(){
document.getElementById("box").style.width="200px";
}
//改變背景顏色
function col_(){
document.getElementById("box").style.background="red";
}
//重置，即將之前改變的高、寬、顏色恢復原來的屬性值
function cho_(){
document.getElementById("box").style.height="100px";
document.getElementById("box").style.width="100px";
document.getElementById("box").style.background="#ccc";
}
//隱藏模塊
function dis_1(){
document.getElementById("box").style.display="none";
}
//顯示模塊
function dis_2(){
document.getElementById("box").style.display="block";
}
</script>
</body>
</html>
批改老師：查無此人批改時間：2019-02-26 09:17:55
老師總結：完成的不錯，下次把代碼縮進，看著整齊。繼續(xù)加油