jQuery.position()方法获取不到值的安全替换方法

jQuery中.position()方法获取值的问题及安全替换方案

在jQuery的世界里，获取元素位置是个常见的需求。当我们想要获取某个元素相对于其父元素的位置时，往往会选择使用.position()方法。按照官方文档的描述，这个方法返回的是元素相对于其最近的非静态定位祖先元素的位置偏移量。听起来很直观，但在实际使用中，我们可能会遇到一些问题。

在谷歌浏览器和一些基于Webkit的浏览器中，即使元素已经明显不是静态位置了，使用.position()方法获取到的值却经常是初始值：0。这让很多开发者感到困惑。原因在于这些浏览器在元素（如图片、flash等）完全加载之前，无法获取到这些元素的高度和宽度信息。换句话说，浏览器需要等到图片等媒体资源完全加载后，才能准确地知道元素的真实尺寸和位置。而火狐浏览器则不同，它在DOM加载完成后就能访问这些属性。

那么，如何解决这一问题呢？一种补救的方法是将.position()的调用放到$(window).load()事件触发之后，以确保所有的媒体资源都已经加载完成。这种方法并不总是可靠。因为即使所有媒体资源都已经加载完成，仍然有可能因为某些动态行为（如用户交互或动画效果）导致位置信息不准确。

在这种情况下，我们可以采取一种变通的方法，使用.offset()方法来进行换算。具体做法是创建一个新的函数aPosition()，利用jQuery的offset()方法来获取元素相对于文档的位置，然后减去其父元素的相应位置，从而得到相对于父元素的位置信息。这种方法虽然需要编写额外的代码，但能够得到更为准确的结果，让开发者更为放心。代码如下所示：

通过上述方式，我们可以在任何浏览器中得到准确的元素位置信息，无论这些浏览器是基于何种渲染引擎构建的。虽然这种方法可能稍微复杂一些，但它能够解决因浏览器差异导致的问题，确保我们的代码在各种环境下都能正常运行。如果你正在处理类似的问题，不妨试试这个解决方案。