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 declare JavaScript and CSS XHTML-compatible?

    How can I get jQuery or Javascript to change css based on the current url?

    Unable to show progress bar

    How to change style of scroll-bar with a fixed position in angular

    How fix position element so that while hovering on one element other two element should remain at same place

    How to have a background image properly fade in with CSS

    Gulp Sass - How to properly name the output css?

    how to load a css for Safari only?

    How to create DropDown MenuBar using CSS

    How to do HTML/CSS form helpers/popover

    How to match a particular tag through css selectors where the class attribute contains spaces?

    How can I replicate something similar to querySelector in browsers like IE 7 and 6?

    How to hide

    How to specify multiple hover event targets in CSS?

    How do I wrap a overflowed span in fixed div

    How to make angular material dialog box work in IE10

    How to add spacing between two rows of multiple divs each

    How to submit data to another file as it is

    How Can i Make a column to fill all the way to the sides in bootstrap

    how to remove the border from the last list item and select :nth-child (multiple items)

    How to fix flexbox position:fixed navbar JS/CSS bug

    How to navigate divs in a custom built single page app? [closed]

    How to add another two full width sections below (CSS)

    How To Slide One Image Out From Behind Another On Hover?

    How can i make an element from a bottom stacking context stays in front of another higher stacking context? [duplicate]

    How can I make this menu using only ul, li and css?

    How to use an existing source map to compile scss to css?

    How to reduce the height of a button with CSS?

    Flex - understanding how to properly reference an image in a library project css file

    How to iqnore mousemove event on child ul