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

Question

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".

Check this out: http://stackoverflow.com/questions/324486/how-do-you-read-css-rule-values-with-javascript — Shog9, Dec 01 '09 at 16:06

score 1 · Answer 1 · answered Dec 01 '09 at 16:05

1

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.

answered Dec 01 '09 at 16:05

Ryan Lynch

7,676
1
24
33

score 0 · Answer 2 · answered Dec 01 '09 at 16:03

0

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.

answered Dec 01 '09 at 16:03

Nosredna

83,000
15
95
122

Hypothetically: Another rule-set is `div { width: 10px !important; }`, you get that width instead of the one for the rule-set with the class selector. – Quentin Dec 01 '09 at 16:06

score 0 · Answer 3 · answered Dec 01 '09 at 16:04

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.

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

3 Answers3