码迷,mamicode.com
首页 > 其他好文 > 详细

offsetLeft和style.left的区别

时间:2015-09-19 20:57:45      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:

 发现这个问题,是在实现图片向右滑动效果时,把图片样式设置在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则可以取到.

offsetLeft和style.left的区别

标签:

原文地址:http://www.cnblogs.com/sapho/p/4822104.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!