JavaScript中Left 和 offsetLeft的区别

[1]:定义了position：relative 的元素 或者 position：absolute 的元素 才有left属性，

每个元素都有offset属性；

什么是offset属性？

我们知道clientX属性返回的当事件被触发的时候，鼠标指针相对于浏览器（或客户区）的水平坐标；

而offset 是大同小异的；

假设，父盒子的定位为 position:relative,子盒子的定位为 position:absolute，那么子盒子style.left的值就是相对于父盒子的值，这个同offsetLeft是相同的；二者区别在于：

[01] offsetLeft 返回的是字符串，比如定位的是 28px  offsetLeft返回的是 28  而style.left 返回的就是 28px，所以我们在js特效中封装动画，计算坐标的时候使用offset比较方便；

[02] style.left 是可以反馈到浏览器的说白了就是读写的，而offset是只读的，所以我们在封装动画的时候常常将  offsetLeft 的值 赋给  style.left

[03] style.left 的值是需要实现定义的，而且必须定义在html里，如果定义在css中  style.left的值还是为空，这样就会出现 style.left 取不到值，但是通过offsetLeft仍然可以取到。