发现这个问题,是在实现图片向右滑动效果时,把图片样式设置在css style中,position设置为absolute,top设置为0,left设置为0,然后用js设置定时器,在setInterval里的参数函数里,我用了 im.style.left = parseInt(im.style.left) + 20 + "px"; 来实现图片左边距20px的递增,但是运行一直实现不了,通过 console.log('im.style.left'+ im.style.left); ,却一直打印不出来im.style.left的值,然后我把代码替换成 im.style.left = im.offsetLeft + 20 + "px"; 就可以成功实现.不过令人奇怪的是,如果还是用上面那句代码,然后把图片im的style样式嵌入img标签里, <img src="" id="im" style = "position:absolute;top:0;left:0"/> 就可以实现了.
下面来总结下它们的区别:
1.定义:
offsetLeft: 获取的是当前对象左侧距离父对象左侧的值(均不包含border);
style.left: 获取或设置相对于具有定位属性(position定义为relative)的父对象的左边距;
还有个clientLeft:获取的是当前对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离,.
2.如果父对象的position定义为relative,子对象的position定义为absolute，那么子对象的style.left的值是相对于父对象的值,等同于offsetLeft的值.
3.区别:
- style.left 返回的是字符串"50px"，offsetLeft返回的是数值50，如果需要对取得的值进行计算，用offsetLeft比较方便,不需要用parseInt(style.left).
- style.left是可以设置或更改，offsetLeft是只能获取不能更改的，因此要改变子对象的位置，只能修改style.left的值。
- style.left的值需要事先定义,而且要定义相应对象的标签里(即内联style)，就如上面用内嵌style的话，获取不到style.left的值.但是offsetLeft则可以取到.