为什么这里的offsetLeft和style.left不一样？？？？
<html>
<head>
<style type='text/css'>
* { margin: 0px; padding: 0px; text-decoration: none;}
#container { overflow: hidden; margin: 50px auto; width: 550px; height: 321px; border: 4px solid #ccc; position: relative;}
#imgList { position: absolute; width: 800%; height: 100%;}
#imgList img { float: left;}
#buttonList { position: absolute; margin: auto; right: 0; left: 0; bottom: 30px; height: 10px; width: 125px;}
#buttonList span { margin: 0 4px; height: 15px; width: 15px; float: left; text-indent: -9999px; cursor: pointer; border: 1px solid #fff; border-radius: 50%; background-color: #333;}
.arrow { position: absolute; display: none; z-index: 10; top: 180px; line-height: 39px; font-size: 39px; font-weight: bold; width: 40px; height: 39px; text-align: center; background-color: RGBA(0,0,0,.3); color: #fff;}
#prev { left: 10px;}
#next { right: 10px;}
#container:hover .arrow { display: block;}
.arrow:hover { background-color: RGBA(0,0,0,.7);}
</style>
</head>
<body>
<div id='container'>
<div id='imgList' style='left: -550px;'>
<img src='images/ads/5.jpg' alt="" />
<img src='images/ads/1.jpg' alt="" />
<img src='images/ads/2.jpg' alt="" />
<img src='images/ads/3.jpg' alt="" />
<img src='images/ads/4.jpg' alt="" />
<img src='images/ads/5.jpg' alt="" />
<img src='images/ads/1.jpg' alt="" />
</div>
<div id='buttonList'>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<a href='javascript:void(0)' id='prev' class='arrow'><</a>
<a href="javascript:void(0)" id="next" class="arrow">></a>
</div>
</body>
<script type='text/javascript'>
function $id(id){ return document.getElementById(id);};
var container = $id('container');
var imgList = $id('imgList');
var perv = $id('prev');
var next = $id('next');
alert(imgList.style.left);
alert(imgList.offsetLeft);
</script>
</html> 
上帝子民Chris浏览 2101回答 1
1回答
-
stone310
offsetLeft是要算所有（本身和父元素）的边框，#container有个border:4px，所以计算#imgList的offsetLeft的时候会加上这4px
随时随地看视频慕课网APP
Html/CSS
JavaScript