How do I access the individual styles of a CSS rule-set using JavaScript?

If I have a style defined using a class selector:

.example {
width: 50px;
开发者_运维知识库}

And in JavaScript, I would like to get the value of the width property for that rule-set, without using some reference to a concrete element that uses that rule-set. I want something which would give me the output "50" or "50px" given the input of "example" and "width".

See this entry on using document.styleSheets to access CSS rules on Quirksmode.

EDIT: I do agree with others here though in that if this is an important requirement you'll have a much easier time of it if you leverage one of the mentioned libraries.

I can't think of a way to do it without creating an element that uses that class. I'd create an invisible div with the class and query that div.

This is one of those times when I do recommend the use of a library.

There are a couple of different methods to access stylesheets attached to a document, and different browsers support different ones.

The YUI 2 StyleSheet Utility will smooth out the differences for you, although you would have to search through the rules to find the one that you were looking for.