How to generate the "computed" CSS for an arbitrary HTML code snippet

Question

I am starting work on a project to be able to grab an arbitrary HTML snippet (e.g. all code within a <div></div> block) and generate the minimal CSS necessary to render the snippet on a blank page while maintaining the same visual styling it has on the originating web page. My sense is that all of the heavy lifting for this function can be found in various libraries and/or code from open-source projects and I would like to leverage that work to the greatest extent possible. My first impulse is to grab the source for Firebug and see how the code related to the 'Computed' tab might be leveraged. Looking to the StackOverflow community for insight on other places to look and/or approaches to this development. Glad to consider any resources in C, C++, Python, Perl, PHP or Javascript. Thanks!

(UPDATE: 8am 3/4/10)

From Sinan's code snippet below, I see there is a standard way to compute the CSS for an INDIVIDUAL element. The full problem, however, is to compute the CSS for the entire snippet - i.e. to effectively compute a minimal stylesheet that correctly accommodates the styling for the entire DOM sub-tree (the selected root element and all sub-elements). The beginning of this algorithm might be to walk the sub-tree and aggregate the CSS for all the individual elements, but this would effectively ignore CSS cascading rules. Thoughts?

Answer 1

Quirksmode might help you,

http://www.quirksmode.org/dom/getstyles.html

Sinan.

---

EDIT:

This was interesting to me and i made a basic attempt (with some jquery help).

More importantly it works and gives the computed styles :)

So here is a snippet for getting body element's computed styles:

JS:

$.each(window.getComputedStyle(document.getElementsByTagName('body')[0],''),
    function(k,v){
        console.log(v + ' : ' +$('body').css(v));
});

OUTPUT:

...
font-weight : 400
height : 608px
left : 0px
letter-spacing : normal
line-height : 13.8333px
...