一、问题总结:
样式必须直接写在元素内部才能通过div.style.left直接获取属性值(也就是必须是内联样式才行),定义在css中的样式不能通过这种方式获取。
让元素移动到200停止
if (left < 200) {
setTimeout( arguments.callee,50);
}
},50);
二、关于offsetLeft和left的区别
(关于offsetLeft:nofollow" href="https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetLeft">https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetLeft)1.定义了position:relative或absolute属性的元素才有left属性,元素都有offsetLeft属性。
2.元素内联样式中设置了left,才能通过div.style.left获取;offsetLeft直接通过div.offsetLeft获取。
3.left可读可写,获取到的是字符串;offsetLeft只读,获取到的是数字。
相同点:定位方式一样,如果父元素设置了定位元素(position设置为relative或absolute),则相对于定位元素定位,否则就是相对于根元素定位。
三、案例:
HTMLElement.offsetParent 是一个只读属性,返回一个指向最近的(closest,指包含层级上的最近)包含该元素的定位元素。如果没有定位的元素,则 offsetParent 为最近 的 table 元素对象或根元素(标准模式下为 html;quirks 模式下为 body)。当元素的 style.display 设置为 "none" 时,offsetParent 返回 null。offsetParent 很有用,因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。
下面的span的父元素没有设置定位元素,所以该元素的offsetParent为根元素,此时的offsetTop相对于根元素定位。