Get all CSS element styles with JavaScript

Question

Is there a way to select all CSS rules for an element with JavaScript? I am not looking for a specific solution until all CSS rules for this element are read.

So I have the following HTML

<div class='styledDiv' style='height:100px;width:100px;'></div>

and then in a separate CSS file:

.styledDiv
{
  background-color: #ccc;
  border: solid 5px blue;
}

I want the end result to include all the inline and individual CSS file rules. It doesn't matter what format the end result is in, whether it's a string or an array, whatever.

Let me also mention, I looked at some code that reads CSS rules from a separate CSS file. I think there might be a better solution. In addition, FireFox and Chrome allow you to scroll through the .style property in the same way as looping through an array. However, FF spills out - * tl-source rules for left and right border / field / padding and does not display actual CSS values. The jQuery related solution is also great.

Answer 1

For FireFox you can use this: https://developer.mozilla.org/en/DOM:window.getComputedStyle

For IE, you can use this: http://msdn.microsoft.com/en-us/library/ms535231(VS.85).aspx

! .

CSS . , IE HEX, Firefox rbg. IE , Firefox pt.

Answer 2

, :

http://developer.apple.com/internet/webcontent/styles.html