JavaScript控制DIV样式案例

Original 2019-01-26 22:05:38 237
abstract:跟着老师做,一个是没有问题的!突然想到这种案例特别适合做循环就试了一下,遇到了很大困难,baidu解决了!<!DOCTYPE html><html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="

跟着老师做,一个是没有问题的!

突然想到这种案例特别适合做循环就试了一下,遇到了很大困难,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>


Correcting teacher:天蓬老师Correction time:2019-01-27 08:59:58
Teacher's summary:用switch 是一个不错的思路 , 不错

Release Notes

Popular Entries