用纯JavaScript实现jQuery的position()函数

Question

我有以下这行代码：

var newLeftPos = $('span#s' + i).position().left - parseInt($('span#s' + i).css('width'), 10);

它在ie6及以上版本中运行良好，但我还需要让它在ie5.5中运行。（现在不要争论这个问题-我知道-但我没有选择）

我确定这是.position()的问题，在使用jquery 1.2测试ie5.5时出现了问题。

我该如何在纯javascript中实现相同的效果？ "offsetParent"能帮我吗？显然ie5.5支持这一点。

提前致谢。

- Tuomas

---

你目前尝试了什么？你是否检查过jquery.js的源代码以了解position()函数的工作原理？ - Kiley Naro

我真的很好奇，到底是谁还在使用IE 5.5浏览器上网，因为这意味着他们可能正在使用Windows 2000，或者更糟糕的Windows Me操作系统。 - gen_Eric

QuirksMode网站上有一篇关于查找元素位置的文章：http://www.quirksmode.org/js/findpos.html。 - Alex Turpin

你看过 getBoundingClientRect() 方法了吗？ - duri

jQuery实际上允许您定义cssHooks以使其正常工作。因此，如果您弄清楚了它，就可以轻松使用它。 - Andrew

Answer 1

你正在寻找offsetParent、offsetLeft和offsetRight。

正如链接中所示，它们甚至被老旧的IE5.5支持。

首先查看text page以确定它们是否真的由你的浏览器支持。

然后，你的函数应该是这样的。

var span = document.getElementById('s' + i);

var newLeftPos = span.offsetWidth - parseInt(span.style.width);

- Jose Faeti

---

嘿，非常感谢！这确实完全符合我的要求。如此简单。我使用的是“offsetLeft”，它给出了正确的值。由于某种原因，span.style.width返回null，但我相信这是一个更容易解决的问题。谢谢。 - Tuomas

@Tuomas 啊，我忘记了offsetLeft！:) 无论如何，在测试时我也注意到了同样的问题。它只在样式内联于HTML中时返回正确的值，但如果它在单独的CSS文件中，则不会...目前还不知道为什么。 - Jose Faeti

这并不是那么简单，如果例如额外使用了transform: translate(-100px, 0)，你就会迷失方向...就像我现在一样。你可以使用这个链接：https://stackoverflow.com/questions/52733352/how-to-get-transform-using-javascript，但事情很快就会变得混乱不堪。 - undefined