屏幕通过Javascript调整元素的坐标

我正在尝试获取浏览器窗口中元素的屏幕坐标（即相对于屏幕的左上角）。很容易获得窗口的大小和位置（screenX，screenY），并且很容易（使用jQuery）获取元素的偏移量（$（’element’）。offset（）。left）。

但是，我需要知道它从元素一直到屏幕一角的像素数。我发现了一些看似特定于IE的东西，但我希望这可以在尽可能多的浏览器中使用。

编辑添加图片： alt text http://img72.imageshack.us/img72/7938/offsetugh.jpg

IE不支持window.screenX/Y 但对于其他浏览器，近似位置是：

 var top = $("#myelement").offset().top + window.screenY; var left = $("#myelement").offset().left + window.screenX;

确切的位置取决于可见的工具栏。您可以使用window对象的outer/innerWidth和outer/innerHeight属性来近似一点。

IE没有提供太多的窗口属性，但奇怪的是，click事件对象将为您提供点击的屏幕位置。所以我想你可以有一个校准页面，要求用户“点击红点”并处理事件

 function calibrate(event){ var top = event.screenY; var left = event.screenX; }

或者可能使用该事件的坐标来校准mouseenter/leave事件。虽然您无法确定鼠标是从左侧，右侧，顶部还是底部进入。

当然，只要他们移动屏幕，您就需要重新校准。

有关浏览器属性兼容性的更多信息，请参阅PPK的对象模型表。

我不认为这是可能的。

元素坐标相对于渲染页面的左上角。

窗口坐标相对于屏幕。

据我所知，没有任何内容将渲染页面的左上角与窗口的左上角相关联。所以没有办法考虑边框，滚动条，铬合金等等。所以我觉得你已经陷入了这个问题。

我不同意jvenema的回答。

无论如何，我已经找到了一个适用于谷歌浏览器的解决方案，但我希望这也适用于许多其他浏览器（也许不适用于一些旧的Internet浏览器）。

在标签内部声明了新的两个全局变量：pageX和pageY，带有var关键字。

这些全局变量应始终存储渲染页面左上角相对于屏幕监视器左上角的坐标，但为了实现此目标， window.onmousemove应引用将pageX设置为event.screenX和event.clientX的区别，以及pageY到event.screenY和event.clientY的区别。

然后，您需要做的就是获取元素的坐标（相对于渲染页面的左上角）并添加pageX和pageY。这些表达式的结果将是此元素相对于屏幕监视器左上角的坐标！

代码示例（仅限javascript）：

希望有所帮助！