javascript - 请问无缝滚动中，为何用offsetWidth代替style.width
本文介绍了javascript - 请问无缝滚动中，为何用offsetWidth代替style.width的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
position: relative;
width: 712px;
height: 108px;
background: red;
margin: 100px auto;
}
div ul{
position: absolute;
top: 0;
left: 0;
}
div ul li{
width: 178px;
height: 108px;
list-style: none;
float: left;
}
</style>
</head>
<body>
<div id="main">
<ul>
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
</ul>
</div>
<script>
window.onload=function()
{
var oDiv = document.getElementById('main');
var oUl = oDiv.getElementsByTagName('ul')[0];
var oLi = oDiv.getElementsByTagName('li');
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width = oLi[0].offsetWidth*oLi.length+"px";
setInterval(function(){
oUl.style.left = oUl.offsetLeft-2+"px";
},30)
}
</script>
</body>
</html>请问，为何在代码中oUl.style.width = oLi[0].offsetWidth*oLi.length+"px";
右侧用offsetWidth？为何不能用style.width来表示每一个li的宽度呢？
解决方案
简单来说 style.width 是你设置的宽度，如果你在样式中没有设置宽度，那么就取不到这个值。而 offsetWidth 是实际宽度，不管你有没有在样式中设置宽度，只要元素有实际宽度，就可以通过这个属性取到。
这篇关于javascript - 请问无缝滚动中，为何用offsetWidth代替style.width的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
