Get the list of all css styles applied to a specific element

Question

Is there any way to get the list of only user-defined computed css styles applied to a specific html element. Styles can be applied in any fashion available now either by external css file or embedded/inline style.

 .p1{font-size:14px; line-height:20px;} 

 <style> .p1{ line-height:18px; color:green;} </style> <p class="p1" style="color:red;">Some Paragraph</p> 

Now the list I require to have, is the only user-defined computed style applied to an element not the whole bunch of computed styles containing blanks/null/default-values as provided by window.getComputedStyle()

just to be more precise on my question, I'd like to put a scenario where I visit a site first-time and I want to use developer toolbar to get the only user-defined styles programmatically (or by writing some scripts on console). So taking this scenario in mind, the final output i require should be-

{
  'color':'red',
  'line-height' : '18px',
  'font-size' : '14px'  
}

Please correct me on my query or any mistake in explaination, if needed.

Answer 1

The method you're looking for is:

window.getComputedStyle()

See: Mozilla Developer Network (MDN) on Window.getComputedStyle();

http://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

The Window.getComputedStyle() method gives the values of all the CSS properties of an element after applying the active stylesheets and resolving any basic computation those values may contain.

---

Based on the markup and styles in your question:

var para1 = document.getElementsByClassName('p1')[0];
var para1Styles = window.getComputedStyle(para1);

para1Color = para1Styles.getPropertyValue('color'); // red
para1FontSize = para1Styles.getPropertyValue('font-size'); // 14px
para1LineHeight = para1Styles.getPropertyValue('line-height'); // 20px

The same method will also allow you to pull style property values from pseudo-elements , by declaring the second (optional) argument.

eg.

var para1AfterStyles = window.getComputedStyle(para1, ':after');

Answer 2

I've been looking for an answer to this question too. I have come up with a solution but it is kinda hackish. It does solve the problem though somewhat.

function getAppliedComputedStyles(element, pseudo) {
    var styles = window.getComputedStyle(element, pseudo)
    var inlineStyles = element.getAttribute('style')

    var retval = {}
    for (var i = 0; i < styles.length; i++) {
        var key = styles[i]
        var value = styles.getPropertyValue(key)

        element.style.setProperty(key, 'unset')

        var unsetValue = styles.getPropertyValue(key)

        if (inlineStyles)
            element.setAttribute('style', inlineStyles)
        else
            element.removeAttribute('style')

        if (unsetValue !== value)
            retval[key] = value
    }

    return retval
}

Let me know if it helps.

It uses css unset property value which is supported only in modern browsers. https://developer.mozilla.org/en/docs/Web/CSS/unset#Browser_compatibility