JavaScript控制DIV样式案例
跟着老师做，一个是没有问题的！
突然想到这种案例特别适合做循环就试了一下，遇到了很大困难，baidu解决了！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style >
#boxs{
width: 100px;
height: 100px;
background: #f5f;
margin: 20px 80px;
}
</style>
</head>
<body>
<div id="boxs"></div>
<input type="button" value="变高" onclick="checkset(this,1)">
<input type="button" value="变宽" onclick="checkset(this,2)" >
<input type="button" value="变色" onclick="checkset(this,3)" >
<input type="button" value="重置" onclick="checkset(this,4)" >
<input type="button" value="隐藏" onclick="checkset(this,5)" >
<input type="button" value="显示" onclick="checkset(this,6)" >
<script type="text/javascript">
function checkset(vla,x){
var boxs = document.getElementById("boxs").style;
switch(x){
case 1:
boxs.height="200px";
break;
case 2:
boxs.width="200px";
break;
case 3:
boxs.background="red";
break;
case 4:
boxs.height="100px";
boxs.width="100px";
boxs.background="#f5f";
break;
case 5:
boxs.display='none';
break;
case 6:
boxs.display='block';
break;
default:
;
}
}
</script>
</body>
</html>