js实现大小转换

最新推荐文章于 2024-07-05 10:53:10 发布

Webwangbo

最新推荐文章于 2024-07-05 10:53:10 发布

阅读量340

点赞数 1

分类专栏： js bom

本文链接：https://blog.csdn.net/Webwangbo/article/details/125435603

版权

javascript

js 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

bom

1 篇文章 0 订阅

订阅专栏

要求：div的宽高为100*100，每次点击快高增加10 当达到200时，每次点击减少10，减到100以后点击每次增加10......

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#wrapper {
				width: 100px;
				height: 100px;
				margin: 0 auto;
				border: 3px solid green;
			}
		</style>
	</head>
	<body>
		<div id="wrapper"></div>
		<script>
			var wrapper = document.querySelector("#wrapper");
			var num = 100;
			var flag = true;
			wrapper.onclick = function() {
				if (flag) {
					num += 10;
					wrapper.style.width = num + "px";
					wrapper.style.height = num + "px";
					if (num >= 200) {
						flag = false;
					}
				}else{
					num -= 10;
					wrapper.style.width = num + "px";
					wrapper.style.height = num + "px";
					if(num<=100){
						flag=true;
					}
				}
			}
		</script>
	</body>
</html>