offsetLeft和style.left的区别

最新推荐文章于 2021-06-08 17:30:14 发布

转载最新推荐文章于 2021-06-08 17:30:14 发布 · 1.1k 阅读

javascript 专栏收录该内容

12 篇文章

订阅专栏

本文详细解析了offsetLeft和style.left属性的功能及区别。offsetLeft用于获取元素距父元素左侧的距离，包括不同定位方式下的行为特点。style.left则用于获取或设置元素相对于已定位父元素左侧的距离，重点介绍了其在不同元素定位状态下的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

offsetLeft总的来说是获取当前元素距父元素左侧的值，具体分两种情况：

如果当前元素仍在普通流中（即position值为static或者relative），offsetLeft获取的是当前元素距流中父元素左侧的值，包括父元素的padding-left、margin-left、border-left，注：IE下有误差；
如果当前元素已从普通流中删除，使用了绝对定位absolute或固定定位fixed，offsetLeft获取的是当前元素距已定位的父元素左侧的值，即left+当前元素的margin-left。
2. style.left获取或设置当前元素相对于已定位的父元素左侧的距离，仅仅是内联样式中的left值；但当元素的position为relative时，style.left指的是相对于该元素在流中原有位置左上角的左边距离。
3. offsetLeft和style.left的区别

style.left返回值为字符串，如”21px”，offsetLeft返回值为数值，如28；
style.left可获取也可设置，offsetLeft只可读；
style.left需事先在内联样式中定义，否则在js中获取到的值为空。