摘要：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JavaScript控制div样式</title> <link rel="stylesheet" href="font-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript控制div样式</title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css" type="text/css">
<style type="text/css">
/* 设置div宽度为100px;高度为100px;背景为红色;左右间距为20px,上下间距为80px; */
#box {
width: 100px;
height: 100px;
background: red;
margin:20px 80px;
}
</style>
</head>
<body>
<script type="text/javascript">
var box;
window.onload=function(){//页面加载时通过Id:box获取div
box=document.getElementById('box');
}
function aa(){
box.style.height="400px";//改变高度
}
function bb(){
box.style.width="400px";//改变宽度
}
function cc(){
box.style.background="pink";//改变颜色
}
function dd(){//重置
box.style.height="100px";
box.style.width="100px";
box.style.background="red";
}
function ee(){//隐藏
box.style.display="none";
}
function ff(){//显示
box.style.display="block";
}
</script>
<div id="box"></div>
<input type="button" value="变高" onclick="aa()"><!-- onclick鼠标点击事件,使DIV变高 -->
<input type="button" value="变宽" onclick="bb()"><!-- onclick鼠标点击事件,使DIV变宽 -->
<input type="button" value="变色" onclick="cc()"><!-- onclick鼠标点击事件,使DIV变色 -->
<input type="button" value="重置" onclick="dd()"><!-- onclick鼠标点击事件,使DIV重置 -->
<input type="button" value="隐藏" onclick="ee()"><!-- onclick鼠标点击事件,使DIV隐藏 -->
<input type="button" value="显示" onclick="ff()"><!-- onclick鼠标点击事件,使DIV显示 -->
</body>
</html>
批改老师：韦小宝批改时间：2018-12-09 17:21:53
老师总结：写的很不错！JavaScript来控制div的样式还是很好玩的吧！课后多练习！继续加油吧！
