摘要：<!DOCTYPE html> <html> <head> <title>
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript控制div
</title>
<meta charset="utf-8">
<style type="text/css">
#box{width:200px;height:200px;background-color:#3CB1E0;border-radius:5px;margin:0px
10px}input{margin:5px 5px}
</style>
</head>
<body>
<div id="box">
</div>
<input type="button" value="变高" onclick="changeHeight()">
<input type="button" value="变宽" onclick="changeWidth()">
<input type="button" value="变色" onclick="changeColor()">
<input type="button" value="变形" onclick="changeShape()">
<br>
<input type="button" value="隐藏" onclick="hide()">
<input type="button" value="显示" onclick="display()">
<input type="button" value="重置" onclick="recover()">
</body>
<script type="text/javascript">
var box;
window.onload = function() {
box = document.getElementById('box')
}
function changeHeight() {
box.style.height = "400px"
}
function changeWidth() {
box.style.width = "400px"
}
function changeColor() {
box.style.backgroundColor = "#11E560"
}
function changeShape() {
box.style.borderRadius = "100px"
}
function hide() {
box.style.display = "none"
}
function display() {
box.style.display = "block"
}
function recover() {
box.style.height = "200px"box.style.width = "200px"box.style.color = "#3CB1E0"box.style.borderRadius = "5px"box.style.display = "block"
}
</script>
</html>
批改老师：查无此人批改时间：2018-11-15 16:39:08
老师总结：变形，我还以为是机器人呢。不错，继续努力。。
