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 not repeat a CSS background gradient

    How remove space on around content (css)?

    Show/Hide Div in jQuery, issue with “skipping” divs

    How to change html td background colour through Javascript?

    How to add multiple css gradient as a multiple background?

    How to import CSS from node_modules in webpack angular2 app

    Google Share button not showing properly if originaly hidden

    How to use Aural CSS?

    How to end line with a using css

    How to display a dynamic rating based on css and the value from PHP? [closed]

    How can i have CSS3 animating menu like followbubble.com

    How to scale content for displays keeping the ratio [closed]

    How to modify CSS via JQuery

    How to make CSS Multi Column layout over html to move between the columns on user click

    How to prevent blur from CSS transform?

    Unsure of how to wrangle my javascript dependencies

    How to apply remaining width to a div in the middle of 2 other divs

    How to make jQuery target and attach a plugin call to hundreds of CSS ID's with an ID number at the end of them?

    How to show text on image when hovering?

    How Can I Make An Odd Shaped Icon into a “Circle”?

    how to change css after some seconds continously?

    CSS How to attach input box to bottom of divider window

    How to center align social media tags using HTML and CSS

    How can I let div inside bootstrap colum scrollable

    How can I make a button change its position after being clicked?

    How do I style a Javascript button using d3?

    How to remove simple text from HTML/HAML

    How to style xml file? from xml to html using xslt and style that html using css [closed]

    How to shift divs “up” in an order after deleting hiding a div with jquery/css

    How can I move this box in this HTML/CSS file?