offsetWidth与offsetLeft用法之无缝滚动
作者：互联网
知识讲解：
（1）offsetWidth是什么？
答：它可以获取物体宽度的数值；offsetWidth实际获取的是盒模型(width+border + padding)的宽度。
如图：
（2）offsetLeft是什么？
答：获取的是当前对象左侧距离父对象左侧的值(均不包含border)。
另外： style.left: 获取或设置相对于具有定位属性(position定义为relative)的父对象的左边距。
clientLeft:获取的是当前对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离。
如果父对象的position定义为relative【相对定位】,子对象的position定义为absolute【绝对定位】，那么子对象的style.left的值是相对于父对象的值,等同于offsetLeft的值。
offsetLeft和style.left的区别：
1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算，还用offsetLeft比较方便。
2. style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left。
3. style.left的值需要事先定义，否则取到的值为空。而且必须要定义在html里，我做过试验，如果定义在css里，style.left的值仍然 为空，这就是我刚开始碰到的问题，总是取不到style.left的值。 offsetLeft则仍然能够取到，无需事先定义div的位置。 //可以查看下面的案例代码（29、39行）
案例：无缝滚动图片
//css代码如上
以上js代码可以实现了简单的无缝滚动图片的方法。
代码解释：
1. 26行代码：获取到唯一的oDiv中的ul。若用getElementsByTagName来获取元素需要加上数组[0]才能准确的获取到ul的值；或者可以直接用getElementById来获取。（注：前面2019.4.27有发表过文章）
2. 35行代码：在计数器setInterval（）函数中让ul中的内容向左不断滚动，每次向左移动5px的距离。
3. 32行代码：完成第二步代码后，要让ul中的图片连续在水平线上滚动起来需要获取到ul的宽度才行（即：其中一个li的宽度*li的总数即可）。
4. 31行代码：此步骤用于复制多的一份ul中的图片，让它以8张图片进行滚动。
5. 36行代码：if语句判断，当图片向左滚动，剩下的长度小于ul的总宽度的一半时，让ul的left值设置为0px（即：让第一张图片回到第八张图片的后面，然后依次可以进行循环操作，这个方法是让计算机自动完成的，执行速度很快）
其中，以上代码灵活运用了offsetWidth和offsetLeft的方法，即分别获取元素宽度和元素距离相对定位的左边间距；很好的诠释了无缝滚动图片的操作效果。
标签：style,获取,代码,ul,offsetLeft,无缝,offsetWidth,left 来源： https://www.cnblogs.com/ytraister/p/10828393.html