<!DOCTYPE html>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{ 50px;
height: 50px;
background-color: red;
position: absolute;
top: 0; left: 0;
line-height: 50px;
text-align: center;
}
</style>
<script type="text/javascript">
window.onload=function (){
// 1、先创建div
for(var i=0;i<20;i++){
document.body.innerHTML=document.body.innerHTML+'<div>'+i+'</div>';
}
// 2 、再查找div的位置
var aDiv = document.getElementsByTagName('div');
for(var i=0;i<10;i++){
aDiv[i].style.left=20+i*50+'px';
}
// 3 、位置稍微做调整
// aDiv[10].style.top=50+'px';
// aDiv[10].style.left=20+'px'; //
// aDiv[11].style.top=50+'px';
// aDiv[10].style.left=20+50*(11-10)+'px';
for(var i=10;i<30;i++){
aDiv[i].style.left=20+(i-10)*50+'px';
aDiv[i].style.top=50+'px';
}
}
</script>
</head>
<body>
</body>
</html>