Calculate area of HTML element on website?
I'm trying to figure out if it's possible to calculate the area of a HTML element on a website? In pixels, as a percentage or whatever.
My first thoughts have been to make the assumption that the element is 100% in width and height, and then try to retrieve the size through a mapping between the HTML and CSS.
So if there's a width/height attribute in the referenced CSS-file I could possibly say that the body element is covered by a column that takes 25% of the area (everything is based on your screen resolution of course - and I'm still trying to figure out how I'd be able to do this programmatically).
Or whether I should render the website and do my calculations based on an image with the most common screen resolution at the time).
Are there any more possible solutions?
(Currently I'm trying to solve this in Perl, but I suppose any language that's got a library for this purpose would be appreciated to know about!)
EDIT: I need to retrieve the visual area for every single element on a page. For example; if there are elements on top of the <body> element, that covers it visually, I want to exclude that area from the <body>'s and so on. A simple raytracing to find the visible area for every element on a page.
var $elt = $('#some-element-id'), height = $elt.height(), width = $elt.width(), area = height * width; // contains the area in px^2