Playing with dynamic styles in IE and the Dev toolbar

Ever wanted to isolate just one element and mess with the style after it’s been generated with javascript? It’s always been a bit of a tall order with Internet Explorer due to the lack of Firebug and the unrealistic results when using IE developer toolbar to change styles. However, the latter tool does have a feature which allows you to save the element outside of the page with all styles copied, even if they were generated by javascript! Awesome.

You will need: IE, IE dev toolbar

Here’s how:

1. Load up your page
2. Open the dev toolbar and select the element using the aptly named element selector or in the DOM tree
3. You will see all the styles in the developer toolbar.
4. Right click the element in the DOM tree and selected Element source and style
5. A new window will open with the HTML for the element, nicely formatted
6. Click File>Save>Original HTML Source
7. Save the file where you want

Now you have your element with all the CSS that was applied to it in the main page in an external file to play with at your leisure!

[The pictures are from RSinteract, a product I am working on.]

Enjoy!