如何獲取網頁上可見DOM元素的可視大小

Question

我正試圖編寫一個算法，試圖將網頁分割爲其組件，如頁腳，頁眉，主要內容區域基於空間組織頁。

我打算做的事情就是：使用Web瀏覽器

1. 首先呈現頁面（說火狐）。
2. 然後檢查瀏覽器

3. 生產從DOM模型我想獲得以下DOM模型：

   一個。元素的大小（高度，寬度）（我喜歡實際大小 - 不僅僅是風格中所說的內容）

   b。元素在網頁上的放置

   c。元素的Z索引。

對於這個問題的目的 - 我會很感激的幫助：3.A和3.B

感謝。

Answer 1

這取決於瀏覽器。下表顯示了跨瀏覽器的方法：

http://www.csscripting.com/css-multi-column/dom-width-height.php

但是如果你只是使用Firefox比你使用Firefox處理代碼/ JavaScript的。你也可以查看Firebug的源代碼，看看它是如何計算寬度/高度/ z-索引。

Answer 2

我想你想要的是：offsetWidth，offsetHeight，offsetTop和offsetLeft。

Answer 3

offsetWidth\offsetHeight是你想要的得到元素尺寸：

https://developer.mozilla.org/en/DOM/element.offsetWidth

offsetTop\offsetRight可能你要查找的對象的位置是什麼：

http://www.quirksmode.org/js/findpos.html