How can I programmatically tell, in JavaScript, from which file a particular CSS class is getting applied to an HTML element?

Question

I need to know how to use JavaScript to find out from which file a particular CSS class is getting applied to a HTML element.

I am developing a web application where user can change the CSS property of particular element, just like we can change it in Firebug.

Edit: I need the JavaScript code of Firebug which shows CSS in right pane in HTML tab with link to files which has that class.

Answer 1

The window.getComputedStyle method returns a CSSStyleDeclaration . Look at the parentRule property of that to get to the cssRule , that has a parentStyleSheet property which should give you the information you need.

The Firebug Lite code might be a less confusing place to look than the full extension to get an idea of how it's all supposed to fit together.