自动生成10个Li

最新推荐文章于 2023-08-10 21:59:13 发布

长岛冰茶子

最新推荐文章于 2023-08-10 21:59:13 发布

阅读量1.7k

点赞数

分类专栏：前端实例文章标签：函数 Li 自动

本文链接：https://blog.csdn.net/Zhang_XiaoHeng/article/details/69942004

版权

前端实例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

自动生成10个Li，代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		div{
			width:50px;
			height:50px;
			background:red;
			border:1px solid #000;
			font:40px/50px '宋体';
			left:0;
			top:0;
			position:absolute;
			text-align:center;
		}
	</style>
	<script>
	window.onload = function(){
		var oBtn = document.getElementById("btn");
		var oDiv = document.getElementsByTagName("div");


			oBtn.onclick = function(){
			for(var i=0;i<10;i++){
				document.body.innerHTML += '<div>'+i+'</div>';
				oDiv[i].style.left=10+i*60+'px';
				oDiv[i].style.top=60+'px';
			};
			for(var i=0;i<10;){

				oDiv[i].style.background='red';
				oDiv[i+1].style.background='yellow';
				oDiv[i+2].style.background='blue';
				oDiv[i+3].style.background='green';
				i+=4;
			}

		};
	};
	</script>
</head>
<body>
	<input id="btn" type="button" value="自动生成10个Li"/>
</body>
</html>