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

style.left与offsetLeft的核心区别

当父级div的position属性设置为relative，而子级div的position设置为absolute时，子级div的style.left属性值与offsetLeft属性值在数值上是相对于父级元素的偏移量，两者表现一致。但它们之间存在以下关键区别：

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

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

第三，定义要求不同。style.left的值必须事先定义，否则获取结果为空。经过测试发现，该值必须在HTML标签内直接定义；若仅定义在CSS文件中，style.left仍会返回空值。这正是初期开发中常遇到的取值为空的原因。

相比之下，offsetLeft无需事先定义div的位置即可正常获取其偏移量。

动态下拉框位置调整示例

以下函数用于处理无限分类的下拉框交互：页面初始仅包含一个下拉框，当用户选中某个选项后，动态生成一个新的select元素，其选项内容为子分类。同时，需要使新生成的子分类select框在水平方向上向后移动20px。

function itemtree_cats_change ( selectObj )