改变dom的js作业
<!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>