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.

EDIT: Let's say we exclude JavaScript - any other approaches possible?


Personally, I would use jQuery - even if you don't use a library, your best bet will be a JavaScript solution.

var $elt = $('#some-element-id'),
    height = $elt.height(),
    width = $elt.width(),
    area = height * width; // contains the area in px^2 and

Need Your Help

jQuery toggleClass with direction and animation

javascript jquery

I've followed a tutorial to add to my site a fixed header after scroll and the logo of the site appear on the fixed part.

Canvas items not rendering properly

html5 canvas html5-canvas draw

I have defined the two functions to render a circle and a triangle. Very straight forward stuff.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.