详解javascript中offsetLeft属性的用法(转)

在前端开发中，我们经常需要获取页面元素在文档流中的位置信息。其中，offsetLeft属性可用于获取某个 HTML 元素相对与其父元素的左侧偏移量（即元素左边缘与其父元素左边缘之间的距离），并且不考虑边框宽度。本文将详解javascript中offsetLeft属性的用法，为大家讲解如何正确地使用该属性。

什么是offsetLeft属性

首先，我们需要了解什么是offsetLeft属性。offsetLeft属性是HTML DOM中元素对象的一个属性，用于获取元素相对于其包含块左侧的偏移量。其值为整型，单位为像素（px），包括元素具有的左边框及左内边距的宽度。

需要注意的是，offsetLeft属性只是获得元素的左相对位置而已，但鉴于元素的位置通常无不考虑其父元素及其他任何元素，因此我们可能还需要考虑其它位置属性。

如何使用offsetLeft属性

在使用offsetLeft属性时，通常需要注意一下几点：

1. 需要注意边框

在使用offsetLeft属性时，需要注意边框的宽度会影响元素的offsetLeft值。如果有边框，则还需将边框宽度计算进去。可以通过offsetLeft减去clientLeft来获取边框宽度。例如：

var borderLeft = element.offsetLeft - element.clientLeft；

2. 父容器对于offsetLeft值的影响

在默认情况下，元素的offsetLeft属性值为父容器左侧的距离。但是，如果存在相对定位、绝对定位等情况，则可能会出现不同的结果。因此，在使用offsetLeft属性时，需要结合元素的定位方式进行判断。例如：

<div style="position:relative;">
  <div id="target" style="position:absolute;left:10px;top:10px;">target</div>
</div>

offsetLeft将会返回10。

3. 需要考虑滚动条

当页面存在滚动条时，页面的offsetLeft值也会受到影响，此时需要考虑元素到滚动条的距离。可以通过访问元素offsetParent属性及scrollLeft属性获取元素到文档顶部的偏移量。例如：

var top = element.offsetTop;
var left = element.offsetLeft;

while (element = element.offsetParent) {
    top += element.offsetTop;
    left += element.offsetLeft;

    if (element === document.body) {
        left -= document.body.offsetLeft;
        top -= document.body.offsetTop;

        left += (typeof window.pageXOffset !== 'undefined') ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
        top += (typeof window.pageYOffset !== 'undefined') ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
        break;
    }
}

总结

通过本文的介绍，我们可以知道，offsetLeft属性可以获取元素定位的左侧距离。在使用offsetLeft属性时，需要考虑元素边框、父容器位置等因素对其值的影响，同时还需要结合其他属性一起使用，才能获取准确的元素位置信息。