获取元素位置的position()与offset()方法区别介绍

当想要在JS中获取DOM元素的位置时，可以使用jQuery提供的两个方法position()和offset()。它们都可以获取元素在页面上的位置信息。本文将会详细讲解这两个方法的区别，以及如何选择使用哪种方法来获取元素的位置信息。

position()方法

position()方法获取的是指定元素相对于它的父元素的定位。在获取的坐标值中，包括了元素的width、height、padding、border，但是不包括margin的部分。

下面是一个简单的示例，以便更好地理解：

<div style="position: relative;">
    <div id="box" style="position: absolute; top: 20px;"></div>
</div>

在上述代码中，我们可以看到两个div，它们的样式都是通过HTML的style属性设置的。第一个div的position属性设置为relative，而第二个div则是设置为absolute。

当我们调用$('#box').position()时，它将返回一个对象，该对象有两个属性：top和left。

假设我们的屏幕尺寸是1920×1080，那么在这个例子中，我们调用position()方法后将返回的值是{top:20,left:0}。这个值的计算方法是：以父元素（设置为relative）的位置作为基准，再加上#box元素设置的top和left值。

offset()方法

相对于position()方法而言，offset()方法获取的是指定元素相对于文档的定位。在计算元素的位置时，还会把margin的值也计算在内。

我们同样使用一个示例来说明。

<div id="container" style="padding:10px;margin-left:30px;background-color:#ccc;height:200px;width:200px;">
    <div id="box" style="position:absolute;top:50px;left:10px;width:50px;height:50px;background-color:red;"></div>
</div>

在这个例子中，我们首先给#container元素设置了一些样式，包括四个方向的padding和左边的margin。紧接着，在#container元素中嵌套了一个#box元素，使其相对于#container元素按照position:absolute方式定位。

我们再次调用$('#box').offset()来获取#box元素相对于文档的位置。由于#container元素有左边的margin（30px），所以我们计算出来的结果为{top:60,left:40}，这个值是相对于文档的。

二者区别

两者区别在于position()只计算元素相对于父元素的位置，而offset()则会计算元素相对于文档的位置，包括margin部分的计算。

总之，如果我们想要获取元素相对于某个父元素的位置，则使用position()方法会更为方便。如果需要获取元素在文档中的位置，包括margin，则应该使用offset()。

总结：

• position()方法是相对于父元素进行计算，而offset()方法是相对于文档进行计算
• position()方法会考虑元素的width、height、padding和border，但不包括margin；而offset()方法则会考虑元素边框到文档margin的所有距离
• 若需要获取相对于某父元素的位置，使用position()更为方便；如果需要获取真实位置（包括margin）,则使用offset()更为准确。

希望本篇文章可以帮助大家更好的理解position()方法和offset()方法的区别，并且可以掌握如何根据不同的需求选择使用哪种方法来获取元素的位置信息。