Use Firebug to get a deep copy of CSS in elements

Question

I am using Firebug to inspect the elements of a webpage. On the right hand of the page there is a "style" tab that list all the CSS styling for a given tag. These CSS styling are coming from a linked CSS page.

What I am looking to do is somehow copy a set of divs with the CSS hardcoded in the div. This way I can copy and paste the elements and have the exact same styling. Is this possible to do with Firebug or perhaps another tool?

Answer 1

I used IE9 to accomplish this.

1. Open a page where you want to grab a style in IE9
2. Press F12 to display Developer Toolbar
3. In the Developer Toolbar press Find and select "Select element by click"
4. Then go to "View" > "Source" and select "Element source with style"

Answer 2

I don't know about Firebug, but you could build a script to do it.

List the CSS you want to copy (every property you believe is required to make it portable) and then loop through in JS and getComputedStyle(). Then build a ; delimited list of property:value pairs, and assign it to the style attribute if your element and all children.

This doesn't look like an easy task - and you will no doubt run into problems.