摘要：<!DOCTYPE html> <html> <head> <title>changeDIV</title> <style type="text/css"> #box{width: 100px; height: 100px; backgroun
<!DOCTYPE html>
<html>
<head>
<title>changeDIV</title>
<style type="text/css">
#box{width: 100px; height: 100px; background: pink; margin: 10px 80px;}
</style>
</head>
<body>
<div id="box"></div>
<input type="button" value="变高" onclick='aa()'>
<input type="button" value="变宽" onclick='bb()'>
<input type="button" value="变色" onclick='cc()'>
<input type="button" value="重置" onclick='dd()'>
<input type="button" value="隐藏" onclick='ee()'>
<input type="button" value="显示" onclick='ff()'>
<script type="text/javascript">
// 用控制按钮来控制改变div的样式 高度、宽度、颜色、重置、隐藏、显示
//运用HTML DOM getElementById() 方法 运用用控制按钮改变dic的css样式
var box
window.onload=function(){
box=document.getElementById('box')
}
function aa(){
box.style.height="400px" //变高
}
function bb(){
box.style.width="400px" //变宽
}
function cc(){
box.style.background="#ccc" //变色
}
function dd(){
box.style.height='100px' //重置
box.style.width="100px" //重置
box.style.background='pink' //重置
}
function ee(){
box.style.display="none" //隐藏
}
function ff(){
box.style.display="block" //显示
}
</script>
</body>
</html>
批改老师：天蓬老师批改时间：2018-11-06 21:31:04
老师总结：以后,函数的命名,请不要用dd,ee,ff之类的,要用有意义的字符串,现在就要养成良好的编程风格
