<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.imgBox ul{
list-style: none;
width:630px;
margin:0 auto;
position:relative;
}
.imgBox ul li {
// width:200px;
//height: 150px;
float:left;
margin-right:10px;
}
</style>
</head>
<body>
<div id="imgBox" class="imgBox">
<ul>
<li><img src="images/0.jpg" alt=""></li>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
<li><img src="images/6.jpg" alt=""></li>
<li><img src="images/7.jpg" alt=""></li>
<li><img src="images/8.jpg" alt=""></li>
</ul>
</div>
<script>
var imgBox=document.getElementById("imgBox");
var lis=document.getElementsByTagName("li");
var arr=[];
for(var i=0;i<lis.length;i++){
arr[i]={left:lis[i].offsetLeft,top:lis[i].offsetTop};
}
console.log(arr);
for(var j=0;j<lis.length;j++){
lis[j].style.left=arr[j].left+"px";
lis[j].style.top=arr[j].top+"px";
lis[j].style.position="absolute";
}
</script>
</body>
</html>
这段代码相信大家都能看懂 如果不设置li元素的宽高 获取到的offsetTop始终是0！！！