JavaScript中style.left与offsetLeft的区别详解

style.left与offsetLeft的基本区别

当父级div的position属性设置为relative，子级div的position设置为absolute时，子级的style.left属性值是基于父级div计算的。这一行为与offsetLeft的计算基准相同，但两者存在以下关键区别：

第一，返回值类型不同。style.left返回的是字符串格式，例如“28px”；而offsetLeft返回的是纯数值28。若需对获取的位置值进行数学计算，使用offsetLeft更为便捷。

第二，读写权限不同。style.left属性既可读也可写，而offsetLeft仅支持读取。因此，若需动态修改div的位置，必须通过修改style.left来实现。

第三，定义方式的要求不同。style.left的值必须预先定义，否则获取结果为空。且该定义必须写在HTML的style属性中（即行内样式）。经测试，若样式定义在外部或内部CSS文件中，style.left仍返回空值，这是初期常遇到的问题。

相比之下，offsetLeft无需预先定义div的位置即可直接获取准确值。

动态下拉框位置偏移示例

以下函数用于处理无限级分类的下拉框交互：页面初始仅有一个下拉框，当选中某一项后，动态生成一个新的select元素显示子分类，同时将该新select框向右偏移20px。

function itemtree_cats_change ( selectObj )

深入解析：源码与书籍对比

关于JavaScript中style.left与offsetLeft的区别，具体说明如下：

在制作焦点轮播图时曾遇到一个问题：使用style.left无法获取图片位置，而改用offsetLeft则成功获取。尽管实现了效果，但为探究原因，查阅《JavaScript高级程序设计》中相关章节，整理出以下对比分析。

（一）、关于style.left类属性，《JavaScript高级程序设计》描述如下：

任何支持style特性的HTML元素在JavaScript中均对应一个style属性。该style对象是CSSStyleDeclaration的实例，仅包含通过HTML的style特性指定的行内样式信息，不包含来自外部或嵌入样式表的层叠样式（关键点：仅能获取行内设置的style属性）。style特性中指定的任何CSS属性都会映射为该style对象的相应属性。

（二）、关于offsetLeft类属性：

offsetLeft：返回元素左外边框到包含元素左内边框之间的像素距离。

offsetTop：返回元素上外边框到包含元素上内边框之间的像素距离。

核心特性总结

结合书籍内容与今日遇到的问题，对style.left和offsetLeft总结如下：

相同点

1、style.left与offsetLeft的值均相对于其父元素计算。

不同点

1、style.left返回带有px单位的字符串，offsetLeft返回纯数值。

2、style.left可读可写，支持配置；offsetLeft仅可读，不可配置。