改变盒子大小（HTML+js+css）

最新推荐文章于 2022-11-01 00:21:55 发布

vi_to

最新推荐文章于 2022-11-01 00:21:55 发布

阅读量7.7k

点赞数 6

文章标签： css js html javascript

本文链接：https://blog.csdn.net/vi_to/article/details/108364771

版权

这几天准备开学，没有时间学习新的知识，所以就发点以前写的代码；比较简单的DOM代码
效果如下：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{width: 50px; height: 50px; background: #CCCCCC;margin: 0 auto;}
		</style>
	</head>
	<body>
		<div id="box" class="box">
			
		</div>
	</body>
	<script type="text/javascript">
		var box=document.getElementById('box');
		var i=0;
		box.onclick=function(){
			++i;
			if(i%2){
				this.style.width='200px';
				this.style.height='200px';
				this.innerHTML='大';
			}else{
				this.style.width='50px';
				this.style.height='50px';
				this.innerHTML='小';
			}
		};
	</script>
</html>