how to get the css keys and values for any html tag

Question

I would like to dump all css key/value pairs for an html tag. In particular, I would like to learn the css properties for <audio> tag, so I can try to customize the look.

document.getElementById('myaudio').style returns a CSSStyleDeclaration object but length returns 0 and I cannot figure out to iterate over the key/value pairs.

Thank you

Answer 1

Try Firebug for firefox. It allows you to view the CSS and properties of any element on a webpage and allows in-page editing so you can customise it on the fly until you are happy without having to create hard and fast changes

Answer 2

You can't iterate over the keys in the style object. It's simply impossible.

The best answer is what Chris said. Use Firebug in Firefox, or similar tools in the other browsers, which can do the work for you and tell you exactly what CSS properties apply to the element.

(Make sure that you tell the tool to show you "user agent styles", not just styles you've added, so you can see what styles the browser applies automatically.)