<!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！！！