copy CSS styles that apply to an element

Question

I want to be able to get as output to the console (or something like this) all the style rules that apply to an element. Such that for example $(_element_).css_styles(); generates output like:

• element { style }
• .class { style }
• super > element { style }
• neighbor + element { style }

How can I get this?

edit: I built a jfiddle that looks good.

Answer 1

If you're on Chrome, you can use getMatchedCSSRules(element). If you're on FireFox (or another Gecko browser), a polyfill is available.