摘要：<!DOCTYPE html> <html> <head> <title>changeDIV</title> <style type="text/css"> #box { width: 200px; height: 200px; b
<!DOCTYPE html>
<html>
<head>
<title>changeDIV</title>
<style type="text/css">
#box {
width: 200px;
height: 200px;
background: #ccc;
border:5px solid pink ;
margin: 10px 60px; }
</style>
<script type="text/javascript">
var box;
window.onload = function() {
box = document.getElementById('box');
}
function aa() {
box.style.width = '600px';
}
function bb() {
box.style.height = '600px';
}
function cc() {
box.style.borderRadius = '50%';
}
function dd() {
box.style.background = 'pink';
box.style.border = '5px solid #ccc';
}
function ee() {
box.style.width = '200px';
box.style.height = '200px';
box.style.background = '#ccc';
box.style.border = '5px solid pink';
box.style.borderRadius = '0';
box.style.display = 'block';
}
function ff() {
box.style.display = 'none';
}
function gg() {
box.style.display = 'block';
}
</script>
</head>
<body>
<div id="box"></div>
<button onclick="aa()">变宽</button>
<button onclick="bb()">变高</button>
<button onclick="cc()">变圆</button>
<button onclick="dd()">变色</button>
<button onclick="ee()">重置</button>
<button onclick="ff()">隐藏</button>
<button onclick="gg()">显示</button>
</body>
</html>
批改老师：天蓬老师批改时间：2018-12-28 09:30:26
老师总结：这个案例不错, 可以了解很 多事件
