views:

139

answers:

2

Lets say I have a couple of CSS classes:

.tickup { color: green; }
.tickdn { color: red; }
.tick { color: black; }

Then I have JavaScript (which is using Prototype) that needs to dynamically change color of another element. That's easy - $('element').style.color = 'red'. But the thing is that the page is skinned, so my only way is to look up a class definition, one of three above, and get the color to set the element to.

Is there a way for me to do something like: findCssClass(tickup).color ?

Thanks!

A: 

Have you tried getStyle:

$$('.tick').each(function (element) {
  element.getStyle('color');
});
Topher Fangio
That doesn't work and requires me to have an element with that style. Looks like there's no way of finding out that information directly.
Daniil
Have you thought about adding an element to the page that is hidden and read the style?
epascarello
@epascarello - yes, but prototype api says that will cause null values in Safari.
Daniil
@Daniil - I apologize, I see now what you are saying. There are some jQuery libraries that are supposed to do it, but I never got any of them to work properly. None of them could handle the `:hover` psuedoclass. However, I believe they worked other than that. Take a look at http://jquery.com/plugins/project/Rule to see if it does what you need.
Topher Fangio
@epascarello - I've used your suggestion, but instead of having a hidden element, I have a span with desired class that contains   inside. Then read it using $('refTickup').getStyle('color') once on 'startup' and that's that. Many thanks! If you add your comment as an answer, I'll accept that.
Daniil
A: 

This previous question may help you out: How do you read css rule values with javascript

epascarello