0

enter image description here

I'm not sure whether it is a right place to ask this question. I need to get the CSS that is generated by Firebug when we inspect a element. But after some research i couldn't able to extract the exact code in firebug-lite extension since i'm not so good at Javascript. So is there any way to extract only the JS code which gets all the CSS for particular element(Inline, External & Imported) like how it is used in firebug tool(Highlited in the screenshot)? Or is there any CODE documentation(Not usage documentation) to achieve this? Any help on this would be greatly appreciated.. Thanks in advance

Stranger
  • 10,332
  • 18
  • 78
  • 115
  • Are you looking for the CSS that styles firebug's UI? I think it's programmed in XUL so it isn't using CSS (although I don't know it's internals that well so someone might have a better answer) – Jason Sperske Apr 27 '13 at 18:55
  • @JasonSperske No. When we inspect some elemnt on any page, it is showing all the CSS in the style panel right? I need the JS code which shows all that related code.. – Stranger Apr 27 '13 at 19:00
  • @Udhay: So you need all applicable CSS styles for that DOM element to be shown via Javascript? – Qantas 94 Heavy Apr 28 '13 at 06:03
  • @Qantas94Heavy Yes! Exactly... – Stranger Apr 28 '13 at 14:24

1 Answers1

2

Firebug has two functions for getting the rules applying to a specific element - getInheritedRules() and getElementRules(). They internally use the Firefox API inIDOMUtils.getCSSStyleRules(), which returns all rules related to the given element.

Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132