如何用JS获取文档的绝对坐标？

Question

我怎样才能获得html / body的绝对屏幕坐标？ 我找到了所有那些window.screenTop，screenLeft，outerheight / innerHeight - 但那不是解决方案。

编辑：我更新了图片以澄清我的需求！

Answer 1

你可以这样做（做一些假设）：

//this is the border width of the OS window.
var border= (window.outerWidth-window.innerWidth)/2; 

//Assuming the window border is homogeneous and there is nothing in
// the bottom of the window (firebug or something like that)
var menuHeight=(window.outerHeight-window.innerHeight)-border*2;

var absX=window.screenX + border;
var absY=window.screenY+border+menuHeight;

Answer 2

尝试：

window.screenX

和

window.screenY

请注意，screenY不会考虑浏览器顶部的地址栏书签栏等

编辑：

您可以使用（window.outerHeight - window.innerHeight）获取额外的偏移量：

window.screenY + window.outerHeight - window.innerHeight

但这假设您在浏览器底部没有任何工具栏（如果您已将停靠的devtools打开则会中断）

Answer 3

刚刚获取body元素：

var $body = $(this.ie6 ? document.body : document);

并使用以下属性：$ body.width（），$ body.height（）

还要获取窗口尺寸

var $window = $(window);
var wWidth  = $window.width();
var wHeight = $window.height();

<强>已更新 尝试使用此：Element.getBoundingClientRect()

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);