如何用JS獲得文檔的絕對座標？

我怎樣才能得到html/body的絕對屏幕座標？我發現所有這些window.screenTop，screenLeft，outerheight/innerHeight - 但那不是解決方案。如何用JS獲得文檔的絕對座標？

編輯：我更新了圖像，以澄清我需要什麼！

enter image description here

來源

2014-07-09 debay

你可以使用JQuery'scrollLeft'和'scrollTop'函數。 – Hardy

可能的重複http://stackoverflow.com/questions/3714628/jquery-get-the-location-of-an-element-relative-to-window – user1094553

感謝迄今，但不幸的是，這並沒有幫助。我做了一個新的形象，以便更清楚我需要什麼！ – debay

你可以這樣做（服用一些假設）：

//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;

來源

2014-07-09 12:23:32

Nifty！我可以忍受的解決方法！ ;）非常感謝！ – debay

偉大的答案！請注意讀者：「外部」值可能是實際像素，而「內部」值可能是「CCS像素」。 – manuell

嘗試：

window.screenX

和

window.screenY

注意screenY沒有考慮到地址欄書籤欄等在瀏覽器頂部

編輯：

您可以使用（window.outerHeight - window.innerHeight），以獲得額外的補償：

window.screenY + window.outerHeight - window.innerHeight

但這是假設你沒有任何工具欄，瀏覽器的底部（將打破，如果你已經停靠devtools開放）

來源

2014-07-09 10:13:36 rob

不幸的是，返回0/0 – debay

但是多數民衆贊成我所需要的，看到更新的圖像 – debay

剛剛得到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);

來源

2014-07-09 11:59:07

也沒有幫助，因爲不清楚身體在窗戶內的位置。我可以得到瀏覽器的左上角位置和innerHeight/Width，但我需要偏移量！ – debay

嘗試使用這個：Element.getBoundingClientRect（） –

top/left在身上始終是0/0 – debay

如何用JS獲得文檔的絕對座標？

回答

相關問題