js实现大小转换

JavaScript实现div尺寸动态变化

原创于 2022-06-23 21:56:59 发布 · 401 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js 同时被 2 个专栏收录

9 篇文章

订阅专栏

bom

1 篇文章

订阅专栏

这篇博客介绍了一个使用JavaScript编写的代码示例，该示例实现了div元素的宽度和高度在100到200像素之间动态变化的效果。当尺寸达到200像素时，点击会使得尺寸减小，降至100像素后再次点击则会增大。这个功能通过一个标志变量来切换增减模式，提供了一种简单的交互体验。

要求：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>