<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 100px;
height: 100px;
background-color: #00FFFF;
}
</style>
</head>
<body>
<!-- 功能2,每次单击big按钮,div的宽高增加10px -->
<button id="big">变大</button>
<button id="small">变小</button>
<div class="box" id="box">
<script type="text/javascript">
// w,h保存当前div的宽,高
let w=100;
let h=100;
let big=document.getElementById("big");
let small=document.getElementById("small");
let div=document.getElementById("box");
big.onclick=function(){
w=w+10;//数据类型的处理
h+=10;
// 临界值(最大高度为400培训,最大宽度500px)
if(w>500){
w=500;
}
if(h>400){
h=400;
}
div.style.width=w+"px";
div.style.height=h+"px";
}
small.onclick=function(){
w=w-10;
h=h-10;
// 临界值(最小高度为0px,最小宽度0px)
if(w<0){
w=0;
}
if(h<0){
h=0;
}
div.style.width=w+"px";
div.style.height=h+"px";
}
</script>
</div>
</body>
</html>
每次单击放大按钮,div的宽高增加10px;单击变小按钮,div的宽高减小10px
最新推荐文章于 2022-08-13 12:48:18 发布