abstrak：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>#box{width: 200px;height: 200px;background: red;margin:40px;}</sty
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{width: 200px;height: 200px;background: red;margin:40px;}
</style>
</head>
<body>
<div id="box"></div>
<input type="button" value="變高" onclick="changeWidth();">
<input type="button" value="變寬" onclick="changeHeight();">
<input type="button" value="變色" onclick="changeBackground();">
<input type="button" value="重置" onclick="reset();">
<input type="button" value="隱藏" onclick="hidd();">
<input type="button" value="顯示" onclick="show();">
<script>
var box;
window.onload=function(){
box = document.getElementById('box');
}
function changeWidth(){
box.style.width="400px";
}
function changeHeight(){
box.style.height="400px";
}
function changeBackground(){
box.style.background="yellow";
}
function reset(){
box.style.width="100px";
box.style.height="100px";
box.style.background="red";
}
function hidd(){
box.style.display="none";
}
function show(){
box.style.display="block";
}
</script>
</body>
</html>
Guru membetulkan：韋小寶Masa pembetulan：2019-03-09 16:37:56
Rumusan guru：寫的很不錯(cuò) 掌握了js以后寫這個(gè)沒有任何難度了吧 等后期學(xué)習(xí)jQuery之后就會(huì)發(fā)現(xiàn)使用jQuery來實(shí)現(xiàn)要更簡單了