Question

非常非常难的js，，，，菜鸟问题

#div1{ margin:0px; width:150px; height:200px; background:#99ff66; float:left; position:relative; left:0px; top:0px;}这是一个div，我想让他移动，
下面是js
var oDiv1=document.getElementById('div1');var timer=null;oDiv1.onclick=function(){ clearInterval(timer); timer=setInterval(function(){ if(oDiv1.offsetLeft==0) { clearInterval(timer); } else { oDiv1.style.left=oDiv1.offsetLeft+1+'px'; } },30);}
这是点击移动的js代码，我只想研究它的速度问题；如果body的margin：0；那么他的速度是每次 1px；
如果body有magin：8px ，只要不是0任意的margin都可以，那么它的速度就不是1排序；
为什么呢：我研究一上午也没想明白；

如果把body的margin清零，然后给div设置margin
那么它的速度就是margin＋1；

但是我这个是相对body运动的，为什么速度不是1呢。

那位那大神。。。。。。。

为什么了解决这个问题申请的号码，没分拉

Answer 1

问题出在你的定位position:relative;这个定位指的是相对元素本来在的位置的偏移，而你计算的offsetLeft是相对与元素的最近一个有定位的祖先节点的偏移，这个值是包括祖先节点的padding和margin以及border的。而left是定位的偏移，这个值是不包含祖先节点的padding和margin以及border的。所以每次oDiv1.offsetLeft+1+'px';都会把祖先节点的margin加上。如果你想要每次偏移都是加1，修改oDiv1.offsetLeft+1+'px';这一句修改为

//下边一句是获取元素的css left的值
var _left = parseInt((oDiv1.currentStyle? oDiv1.currentStyle : window.getComputedStyle(oDiv1, null)).left);
oDiv1.style.left = (_left + 1) + 'px';

追问

你好，请问如果div是absolute那么left和offsetLeft到底是根据body定位，还是。。。如果body的margin是8pxdiv left是0我看这个div就紧贴着 浏览器边缘了 从这点看 应该是不是根据body，但是 如果他的父元素没有position属性，那么他就根据 body啊 也就是说left是距body的距离

Answer 2

按照你的代码来，如果设置body的margin为0的话，点击div是不会动的。然后设置margin是8px的话，div每次移动的距离就是（8+1）px；你设置margin为1px的时候oDiv1.offsetLeft和oDiv1.style.left就是轮流加1.
最初始oDiv1.offsetLeft = 1（margin 1）；
执行一次后oDiv1.style.left = 2；
第二个循环 oDiv1.offsetLeft = 2；然后oDiv1.style.left = 3；就这样循环下去了...

如果是absolute 那你要设置left的值不为0 否则他就会一直不动了 设置left为1 div会每次移动一个像素

Answer 3

因为div1的position是relative。
所以设置left之后是从当前位置偏移的。
oDiv1.style.left=oDiv1.offsetLeft+1+'px';
你可以打印看看oDiv1.offsetLeft值
body的margin是8的时候
第一次left=9px，offsetLeft变成17
第二次left=18px, offsetLeft变成26
第三次left=27px, offsetLeft变成35
...............
...............

追问

你好，请问
如果div是absolute
那么left
和offsetLeft到底是根据body定位，还是。。。
如果body的margin是8px
div left是0
我看这个div就紧贴着 浏览器边缘了

追答

absolute会和最近的父元素的position是absolute，relative，fixed的元素定位。

如果父元素都没有的话就和body定位了。

offsetLeft是当前元素和当前元素的offsetParent属性获取的元素之间的距离。