<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动生成10个li</title>
<style>
*{
margin:0;
padding:0;}
ul,li{
list-style-type:none;}
ul{
position: relative;}
li{
background:red;
width:50px;
height: 50px;
font-size:30px;
text-align: center;
line-height:50px;
color: white;
margin:10px;
position: absolute;
}
</style>
<script>
window.onload = function () {
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('ul1');
var aLi = document.getElementsByTagName('div');
oBtn.onclick = function () {
for(var i=0;i<10;i++){
oUl.innerHTML += "<li>"+i+"</li>";
}
for(var i=0;i<aLi.length;i++){
aLi[i].style.left = 10+i*60+"px";
aLi[i].style.top= 10+i*60+"px";
}
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="自动生成10个LI">
<ul id="ul1"></ul>
</body>
</html>
添加回答
举报
0/150
提交
取消