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 can my css div with the display flex property be alignd to the right when it's wrapping?

    How to make CSS div width equal to browser width if element is inside wrapper element

    How to change a span to look like a pre with CSS?

    How to Implement this UI with CSS [closed]

    How to select non-header cells with css

    How can i disable the bootstrap hover color for links

    How can I stop this ugly font smoothing with custom fonts in CSS?

    How do I make this lightbox I am creating only open on the div I am clicking?

    Hide/Show table in my Email with the use of a button

    How to change div border automatically when more children are added to it

    How do I absolute position a div from left to the right using media queries?

    how to position a search bar in html/css

    How to serve different size SVG graphic in css background image?

    PHP How to not cache generated HTML but cache static data like images/js/css

    CSS Flexbox : How to construct a specific layout

    How to set auto width for the fixed child div, when parent div change width?

    How to get the rotation of degree with getBoundingClientRect?

    How to combine wildcard and not selectors in CSS

    How can I reposition an entry form and button correctly on a background image?

    How to CSS select all cells with colspan set?

    CSS how to get the: a img on top, insted of the first a href “”without floating

    I found another way of doing this: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> ul {list-style: none; margin: 0; padding: 0;} li {position: relative; overflow: hidden;} a {display: block;}...
    Read more

    css - how to get floated divs to stack when you zoom in

    How to show a div behind navigation on rollover

    CSS how to use pseudo-class :not with :nth-child

    CSS: How to change background color [closed]

    How to wrap two spans into one line with CSS

    How to let a div behave like another div?

    How to Troubleshoot CSS?

    How i can put a picture above a border in css?

    CSS Dropdown menu - How to add thumbnails