How to get the complete css information if css class is given form the used style sheets files

Question

I want to find the complete css information of applied class in details by clicking on it. Like

<div class="class1 class2">This is my div</div>

Suppose I've written css in xyz.css file

.class1{
   background-color:#999999;
   width:auto;
   overflow:hidden;
}

.class2{
   background-color:#856241;
   width:500px;
   overflow:hidden;
}

After clicking on the div I want to display all the css information which is applied to the div. jQuery solution will be preferred.

As per first few answers I'm getting all the computed style but I'm interested in my only applied class style details.

Answer 1

You can get the current style of an element with this:

var elem = ...;
var css = document.defaultView ? document.defaultView.getComputedStyle(elem, null) : elem.currentStyle;

if ('length' in css) {
    // iterate over all property names
    for (var i = 0, l = css.length; i < l; ++i) {
        var propertyName = css[i];
        // get property value
        var value = css[propertyName];
        if (value != void 0) {
            console.log(propertyName+': '+value);
        }
    }
} else {
    // IE
    for (var propertyName in css) {
        // get property value
        var value = css[propertyName];
        if (value != void 0) {
            console.log(propertyName+': '+value);
        }
    }
}

Try this here: http://jsfiddle.net/P5WYC/2/

You may also whant to try with document.styleSheets ( see http://www.quirksmode.org/dom/w3c_css.html )