1. 首頁
  2. 問答
  3. firebug - 獲取絕對座標

firebug - 獲取絕對座標

2012-06-05 114 views
3

我需要獲得任何由Firebug檢查的DOM元素的絕對座標（相對於文檔開始的左側和頂部），而不管DOM樹的深度如何。有這樣一個插件嗎？firebug - 獲取絕對座標

來源

2012-06-05 koral

回答

3

實際上，您並不需要插件，只需JavaScript的一些知識即可瞭解一些Firebug內部組件。

你可以在this article找到如何獲得DOM元素的絕對座標。每個DOM元素都具有屬性.offsetLeft .offsetTop .offsetParent，這些屬性定義了關於其他DOM元素（offsetParent）的位置。層次結構頂部的元素有一個offsetParent = null。給定一個元素，您可以遍歷層次結構中的元素及其偏移父級以查找絕對座標。

從網頁複製的代碼：

var findpos = function findPos(obj) { 
    var curleft = curtop = 0; 
    if (obj.offsetParent) { 
     do { 
     curleft += obj.offsetLeft; 
     curtop += obj.offsetTop; 
     } while (obj = obj.offsetParent); 
     return [curleft,curtop]; 
    } 
}

（粘貼在Firebug，然後你在控制檯中使用一個findpos功能）。

對於大多數最簡單的情況，您將有offsetParent = <body>零偏移（如在屏幕截圖中），所以你不需要添加任何東西offsetLeft和offsetTop。但是，如果相對定位發生，那麼你必須通過父母。

當您在Firebug中選擇一個元素時，它在Firebug控制檯中可用作爲$0。

所以，這兩個東西混合後，可以發出命令像截圖：

Firebug - finding absolute coords of a node

輕鬆獲得任何元素的絕對COORDS。

我粘貼上面的腳本應該在絕大多數情況下工作。您也可以閱讀this post以獲得更強大的功能。

來源

2012-06-06 20:52:02

相關問題

 相關問題