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


Tags: javascript,jquery,css,firebug,stylesheet

Problem :

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.



Solution :

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 )


    CSS Howto..

    how to use static folder in django for css and javascript?

    How to set style for n-th td in a table using css

    How to turn off spell checking WebStorm of css?

    How can I change Github markdown background?

    How to apply an inner stroke to an image with just CSS?

    How to conditionally add css properties in jquery (coffeescript)

    How to have different lightbox for different object

    how to make a css gradient stop after so many pixels?

    How to avoid background image stretched horizontally with CSS?

    How to make a div that appear on hover, stay while its hovered on in jquery or css

    How do change the size of input box?

    How to refer to an image with a certain id thats into a section with a certain id - CSS

    How to style the last element before another specific element in CSS? [duplicate]

    How to make a transparent overlay on image [duplicate]

    How to use active and before with CSS?

    Use ajax to show-hide only a subset of image

    How to avoid css overlapping?

    css nested classes, how to not repeat code?

    How to get opaque text on div with transparency?

    How can I do width = 100% - 100px in CSS?

    How do I get a td background color to stretch from left to right, not just the table width, in html & css?

    How are new lines made with text as background?

    How to set up navigation with fading (sprite) background image

    How to vertically center text next to a radio button

    How to select elements using CSS selector who's attribute can have multiple values

    jQuery - jCarouselLite - Images are not showing up

    How to set size of font with CSS without using - hyphen?

    how to make edges of a line fade out?

    How to load dynamic content (get, html, data) via jquery/css in Wordpress?

    How make input element take up available space next to a fixed width element?