How do I get the visual size of visible DOM elements on a web page

I am trying to write an algorithm that tries to segment a webpage into its components such as footer, header, main content area based on the spacial organization of the page.

What I plan on doing is to:

1. First render the page using a web browser (say Firefox).
2. Then inspect the DOM model produced by the browser

3. From the DOM开发者_Python百科 model I'd like to get the following:

   a. Size of the element (height, width) (I'd like the actual size - not just what is in the style says)

   b. Placement of the element on the web page

   c. Z-index of the element.

For the purposes of this question -- I'd appreciate help with: 3.a and 3.b

Thanks.

offsetWidth\offsetHeight is what you want for getting element dimensions:

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

offsetTop\offsetRight is likely what you want to find location of objects:

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

It depends on the browser. This table shows the methods across browsers:

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

But if you're just using Firefox than you use Firefox handling code / Javascript. You could also look into the source code of Firebug and see how it calculates width / height / z-index.

I think what you want is: offsetWidth, offsetHeight, offsetTop, and offsetLeft.